cbvirtua 1.0.107 → 1.0.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.107",
+  "version": "1.0.109",
   "description": "",
   "main": "index.js",
   "scripts": {

package/pdfsss.txt

@@ -0,0 +1,900 @@
+dompdf
+该脚本允许您直接在用户浏览器上将网页或部分网页生成为可编辑、非图片式、可打印的 pdf。由于生成是基于 DOM 的，因此可能与实际表现不会 100% 一致。如果是复杂的pdf生成需求，不建议使用。
+
+在线体验：在线体验
+
+pdf生成示例
+pdf生成示例
+
+它是如何工作的
+该脚本基于html2canvas和jspdf，与以往将 html 页面通过 html2canvas 渲染为图片，再通过 jspdf 将图片生成 pdf 文件不同，该脚本通过读取 DOM 和应用于元素的不同样式，改造了 html2canvas 的 canvas-renderer 文件，调用 jspdf 的方法生成 pdf 文件。 所以他有以下优势：
+
+不需要服务器端的任何渲染，因为整个 pdf 是在客户端浏览器上创建的。
+生成的是真正的 pdf 文件，而不是图片式的，这样生成的 pdf 质量更高，您也可以编辑和打印生成 pdf 文件。
+更小的 pdf 文件体积
+当然，它也有一些缺点：
+
+由于是基于 DOM 的，所以可能与实际表现不会 100% 一致。
+有的 css 属性还没有被支持，查看支持的 css 属性。
+不适合在 nodejs 中使用。
+有的样式可能无法被正确渲染，比如：
+text-shadow
+已实现功能
+功能	状态	说明
+文本渲染	✅	支持基础文本内容渲染,font-family,font-size,font-style,font-variant,color 等，支持文字描边，不支持文字阴影
+图片渲染	✅	支持网络图片，base64 图片，svg 图片
+边框	✅	支持 border-width,border-color,border-style,border-radius,暂时只实现了实线边框
+背景	✅	支持背景颜色，背景图片，背景渐变
+canvas	✅	支持渲染 canvas
+svg	✅	支持渲染 svg
+阴影渲染	✅	使用 foreignObjectRendering，支持边框阴影渲染
+渐变渲染	✅	使用 foreignObjectRendering，支持背景渐变渲染
+iframe	❌	支持渲染 iframe
+foreignObjectRendering 使用
+在 dom 十分复杂，或者 pdf 无法绘制的情况（比如：复杂的表格，边框阴影，渐变等），可以考虑使用 foreignObjectRendering。 给要渲染的元素添加 foreignObjectRendering 属性，就可以通过 svg 的 foreignObject 将它渲染成一张背景图插入到 pdf 文件中。
+
+但是，由于 foreignObject 元素的渲染依赖于浏览器的实现，因此在不同的浏览器中可能会有不同的表现。 所以，在使用 foreignObjectRendering 时，需要注意以下事项：
+
+foreignObject 元素的渲染依赖于浏览器的实现，因此在不同的浏览器中可能会有不同的表现。
+IE 浏览器完全不支持，推荐在 chrome 和 firefox,edge 中使用。
+生成的图片会导致 pdf 文件体积变大。
+示例
+
+<div style="width: 100px;height: 100px;" foreignObjectRendering>
+    <div
+        style="width: 50px;height: 50px;border: 1px solid #000;box-shadow: 2px 2px 5px rgba(0,0,0,0.3);background: linear-gradient(45deg, #ff6b6b, #4ecdc4);"
+    >
+        这是一个div元素
+    </div>
+</div>
+浏览器兼容性
+该库应该可以在以下浏览器上正常工作（需要 Promise polyfill）：
+
+Firefox 3.5+
+Google Chrome
+Opera 12+
+IE9+
+Safari 6+
+使用方法
+dompdf 库使用 Promise 并期望它们在全局上下文中可用。如果您希望支持不原生支持 Promise 的较旧浏览器，请在引入 dompdf 之前包含一个 polyfill，比如 es6-promise。
+
+安装：
+
+ npm install dompdf.js --save
+CDN引入：
+
+<script src="https://cdn.jsdelivr.net/npm/dompdf.js@1.0.4/dist/dompdf.min.js"></script>   
+基础用法
+import dompdf from 'dompdf.js';
+dompdf(document.querySelector("#capture"), {
+    useCORS: true //是否允许跨域
+    })
+    .then(function (blob) {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'example.pdf';
+        document.body.appendChild(a);
+        a.click();
+    })
+    .catch(function (err) {
+        console.log(err, 'err');
+    });
+乱码问题-字体导入支持
+由于jspdf只支持英文，所以其他语言会出现乱码的问题，需要导入对应的字体文件来解决，如果需要自定义字体，在这里将字体 tff 文件转化成 base64 格式的 js 文件，中文字体推荐使用思源黑体,体积较小。 在代码中引入该文件即可。
+
+    <script type="text/javascript" src="./SourceHanSansSC-Normal-Min-normal.js"></script>
+    dompdf(document.querySelector("#capture"), {
+    useCORS: true, //是否允许跨域
+    fontConfig: {
+                    fontFamily: 'SourceHanSansSC-Normal-Min',
+                    fontBase64: window.fontBase64,
+                },
+    })
+    .then(function (blob) {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'example.pdf';
+        document.body.appendChild(a);
+        a.click();
+    })
+    .catch(function (err) {
+        console.log(err, 'err');
+    });
+构建
+克隆 git 仓库：
+
+$ git clone git@github.com:lmn1919/dompdf.js.git
+安装依赖：
+
+$ npm install
+构建浏览器包：
+
+$ npm run build
+
+
+方案二
+
+html2canvas + jspdf，使用html2canvas将使用canvas将页面转为base64图片流，并插入jspdf插件中，保存并下载pdf。
+
+使用
+
+1.安装：
+npm install --save html2canvas
+npm install --save jspdf
+
+
+2.绘制较短页面
+
+
+新建htmlToPdf.js导出文件
+
+js 体验AI代码助手 代码解读复制代码// utils/htmlToPdf.js：导出页面为PDF格式
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+
+export default {
+  install(Vue, options) {
+    // id-导出pdf的div容器；title-导出文件标题
+    Vue.prototype.htmlToPdf = (id, title) => {
+      const element = document.getElementById(`${id}`)
+      const opts = {
+        scale: 12, // 缩放比例，提高生成图片清晰度
+        useCORS: true, // 允许加载跨域的图片
+        allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
+        tainttest: true, // 检测每张图片已经加载完成
+        logging: true // 日志开关，发布的时候记得改成 false
+      }
+
+      html2Canvas(element, opts)
+        .then((canvas) => {
+          console.log(canvas)
+          const contentWidth = canvas.width
+          const contentHeight = canvas.height
+          // 一页pdf显示html页面生成的canvas高度;
+          const pageHeight = (contentWidth / 592.28) * 841.89
+          // 未生成pdf的html页面高度
+          let leftHeight = contentHeight
+          // 页面偏移
+          let position = 0
+          // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+          const imgWidth = 595.28
+          const imgHeight = (592.28 / contentWidth) * contentHeight
+          const pageData = canvas.toDataURL('image/jpeg', 1.0)
+          console.log(pageData)
+          // a4纸纵向，一般默认使用；new JsPDF('landscape'); 横向页面
+          const PDF = new JsPDF('', 'pt', 'a4')
+
+          // 当内容未超过pdf一页显示的范围，无需分页
+          if (leftHeight < pageHeight) {
+            // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
+            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+          } else {
+            // 超过一页时，分页打印（每页高度841.89）
+            while (leftHeight > 0) {
+              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+              leftHeight -= pageHeight
+              position -= 841.89
+              if (leftHeight > 0) {
+                PDF.addPage()
+              }
+            }
+          }
+          PDF.save(title + '.pdf')
+        })
+        .catch((error) => {
+          console.log('打印失败', error)
+        })
+    }
+  }
+}
+
+
+index.vue中使用导出方法
+
+js 体验AI代码助手 代码解读复制代码<template>
+  <div>
+      <div
+       id="pdfDom"
+      >
+        测试数据
+      </div>
+      <el-button type="primary" round style="background: #4849FF" @click="btnClick">导出PDF</el-button>
+    </div>
+ </template>
+ <script>
+ import JsPDF from 'jspdf'
+ import html2Canvas from 'html2canvas'
+ methods: {
+    // 导出pdf
+    btnClick() {
+     this.$nextTick(() => {
+         this.htmlToPdf('pdfDom', '个人报告')
+     })
+    },
+  },
+ </script>
+
+问题及解决方案
+1.页面绘制转码时间过长
+
+可以考虑在页面初始化完成后就对页面进行抓取绘制及转码，将转码数据保存，在点击下载时直接生成pdf并保存。
+
+2.html2canvas能够抓取的页面长度大约为1440，两个A4页面左右，超出不会抓取，需要控制多个节点，循环绘制。
+
+绘制多个节点
+
+
+新建htmlToPdf.js导出文件
+
+js 体验AI代码助手 代码解读复制代码import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+
+export default {
+  install(Vue, options) {
+    // id-导出pdf的div容器；title-导出文件标题
+    Vue.prototype.htmlToPdf = (name, title) => {
+      const element = document.querySelectorAll(`.${name}`)
+      let count = 0
+      const PDF = new JsPDF('', 'pt', 'a4')
+      const pageArr = []
+      const opts = {
+        scale: 12, // 缩放比例，提高生成图片清晰度
+        useCORS: true, // 允许加载跨域的图片
+        allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
+        tainttest: true, // 检测每张图片已经加载完成
+        logging: true // 日志开关，发布的时候记得改成 false
+      }
+      for (const index in Array.from(element)) {
+        html2Canvas(element[index], opts).then(function(canvas) {
+          // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+          const contentWidth = canvas.width
+          const contentHeight = canvas.height
+          const imgWidth = 595.28
+          const imgHeight = (592.28 / contentWidth) * contentHeight
+          const pageData = canvas.toDataURL('image/jpeg', 1.0)
+          // 一页pdf显示html页面生成的canvas高度;
+          const pageHeight = (contentWidth / 592.28) * 841.89
+          // 未生成pdf的html页面高度
+          const leftHeight = contentHeight
+          pageArr[index] = { pageData: pageData, pageHeight: pageHeight, leftHeight: leftHeight, imgWidth: imgWidth, imgHeight: imgHeight }
+          if (++count === element.length) {
+            // 转换完毕，可进行下一步处理 pageDataArr
+            let counts = 0
+            for (const data of pageArr) {
+              // 页面偏移
+              let position = 0
+              // 转换完毕，save保存名称后浏览器会自动下载
+              // 当内容未超过pdf一页显示的范围，无需分页
+              if (data.leftHeight < data.pageHeight) {
+                // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
+                PDF.addImage(data.pageData, 'JPEG', 0, 0, data.imgWidth, data.imgHeight)
+              } else {
+                // 超过一页时，分页打印（每页高度841.89）
+                while (data.leftHeight > 0) {
+                  PDF.addImage(data.pageData, 'JPEG', 0, position, data.imgWidth, data.imgHeight)
+                  data.leftHeight -= data.pageHeight
+                  position -= 841.89
+                  if (data.leftHeight > 0) {
+                    PDF.addPage()
+                  }
+                }
+              }
+              if (++counts === pageArr.length) {
+                PDF.save(title + '.pdf')
+              } else {
+                // 未转换到最后一页时，pdf增加一页
+                PDF.addPage()
+              }
+            }
+          }
+        })
+      }
+    }
+  }
+}
+
+
+index.vue中使用导出方法
+
+js 体验AI代码助手 代码解读复制代码<template>
+  <div>
+      <div
+       class="pdfDom"
+      >
+        测试数据
+      </div>
+       <div
+       class="pdfDom"
+      >
+        测试数据2
+      </div>
+       <div
+       class="pdfDom"
+      >
+        测试数据3
+      </div>
+      <el-button type="primary" round style="background: #4849FF" @click="btnClick">导出PDF</el-button>
+    </div>
+ </template>
+ <script>
+ import JsPDF from 'jspdf'
+ import html2Canvas from 'html2canvas'
+ methods:{
+    // 导出pdf
+    btnClick() {
+     this.$nextTick(() => {
+         this.htmlToPdf('pdfDom', '个人报告')
+     })
+    },
+  },
+ </script>
+
+
+html2canvas：github.com/niklasvh/ht…
+jspdf：github.com/parallax/js…
+实现效果
+
+
+方案三（推荐）
+
+puppeteer(中文翻译”操纵木偶的人”) 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具，它是一个 Node 库，提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整（非无头）的 Chrome。
+Puppeteer 能做些什么
+
+
+生成页面的截图和PDF。
+抓取SPA并生成预先呈现的内容（即“SSR”）。
+从网站抓取你需要的内容。
+自动表单提交，UI测试，键盘输入等
+创建一个最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。
+捕获您的网站的时间线跟踪，以帮助诊断性能问题。
+
+
+我们只需关注并使用生成页面的截图PDF功能
+Puppeteer的使用
+使用express框架搭建简单的node服务
+安装:
+npm i puppeteer 或 yarn add puppeteer
+
+作者：ArvinC
+链接：https://juejin.cn/post/7090368199291568165
+来源：稀土掘金
+著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
+
+
+Vue 实现 PDF 导出功能
+2023-10-18
+2,423
+阅读4分钟
+本文旨在通过 html2canvas 和 jspdf，先将页面的 html 转成 canvas，再将 canvas 转成 pdf，同时解决了分页截断的问题。
+
+安装依赖
+yarn add html2canvas
+yarn add jspdf
+思路
+通过网上的一些教程，初步实现了 html 转 pdf 的功能，将一整个 DOM 元素放进去，虽然可以粗糙实现，但是出现了很多地方被分页截断的情况，这个时候就需要在某一张图片被截断时，将其自动切换到下一页中。
+
+1.拆解父节点
+所以第一步：拆解父节点，一行一行细分为很多子节点，循环遍历这些子节点，累加这些子节点的高度，如果超出了 a4 纸（210*297）的高度，则分页。
+
+import html2Canvas from "html2canvas";
+import JsPDF from "jspdf";
+
+export function oneNodeMultipleChildren(title, node) {
+  html2Canvas(node, {
+    scale: 2, // 清晰度
+  }).then(function (canvas) {
+    let PDF = new JsPDF("", "mm", "a4"); // 以mm为单位
+    let position = 0; // 页面偏移
+    let contentWidth = canvas.width; // 转换成canvas后的宽度
+    let contentHeight = canvas.height; // 转换成canvas后的高度
+    let proportion = 210 / node.offsetWidth; // html缩小至a4纸大小时的比例
+    let currentHeight = 0; // 当前高度
+    let imgWidth = 210; // canvas缩小至a4纸大小时的宽度
+    let imgHeight = (210 / contentWidth) * contentHeight; // canvas缩小至a4纸大小时的高度
+    let pageData = canvas.toDataURL("image/jpeg", 1.0); // 将canvas转成图片
+
+    for (let j = 0; j < node.children.length; j++) {
+      let childHeight = (node.children[j].offsetHeight + 8) * proportion; // 页面中每行的间距 margin-bottom: 8px
+
+      if (currentHeight + childHeight > 297) {
+        // 如果加上这个子节点后内容超出a4纸高度，就从当前位置开始分页
+        addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
+        position -= currentHeight; // 这一页放了多少高度的内容，下一页就从这个高度开始偏移
+        if (position >= -contentHeight) {
+          PDF.addPage(); // 添加新pdf页
+        }
+        currentHeight = childHeight; // 下一页第一个元素的高度
+      } else {
+        currentHeight += childHeight;
+      }
+    }
+    addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight); // 最后一页
+    PDF.save(title + ".pdf");
+  });
+}
+
+function addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight) {
+  PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); // 在当前pdf页添加图片
+  PDF.setFillColor(255, 255, 255); // 遮挡的颜色
+  PDF.rect(0, currentHeight, 210, Math.ceil(297 - currentHeight), "F"); // 添加空白遮挡
+  // PDF.rect参数分别为：起始横坐标、起始纵坐标、绘制宽度、绘制高度、填充色
+}
+2.合并父节点
+经过上述步骤，一个父节点多个子节点，并且每个子节点独占一行的布局可以实现分页，那要是有很多父节点呢？就需要遍历每个父节点，合并所有子节点，进行分页截断。
+
+import html2Canvas from "html2canvas";
+import JsPDF from "jspdf";
+
+export function exportPdf(title, id) {
+  let content = document.querySelector(`#${id}`);
+  let first = content.firstElementChild.firstElementChild;
+  let second = content.lastElementChild;
+  oneNodeMultipleChildren(title, content, [first, second]);
+}
+
+export function oneNodeMultipleChildren(title, content, nodes) {
+  html2Canvas(content, {
+    scale: 2,
+  }).then(function (canvas) {
+    let PDF = new JsPDF("", "mm", "a4");
+    let position = 0;
+    let contentWidth = canvas.width;
+    let contentHeight = canvas.height;
+    let proportion = 200 / content.offsetWidth;
+    let currentHeight = 0;
+    let imgWidth = 200;
+    let imgHeight = (200 / contentWidth) * contentHeight;
+    let pageData = canvas.toDataURL("image/jpeg", 1.0);
+
+    for (let i = 0; i < nodes.length; i++) {
+      // 根据传入的父节点数量进行循环，遍历父节点，合并所有子节点
+      for (let j = 0; j < nodes[i].children.length; j++) {
+        let childHeight = (nodes[i].children[j].offsetHeight + 8) * proportion;
+
+        if (currentHeight + childHeight > 287) {
+          addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
+          position -= currentHeight;
+          if (position >= -contentHeight) {
+            PDF.addPage();
+          }
+          currentHeight = childHeight;
+        } else {
+          currentHeight += childHeight;
+        }
+      }
+    }
+    addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
+    PDF.save(title + ".pdf");
+  });
+}
+
+function addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight) {
+  PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); // 在当前pdf页添加图片
+  PDF.setFillColor(255, 255, 255); // 遮挡的颜色
+  PDF.rect(0, currentHeight, 210, Math.ceil(297 - currentHeight), "F"); // 添加空白遮挡
+}
+3.每行多个元素
+这个时候新的问题出现了，由于页面布局为 flex 布局，不同缩放下，每行的元素数量会出现变化。所以我们获取第一个子元素与 a4 纸宽度关系，如果为 n 倍，那后面 n-1 个子元素的高度不进行累加。
+
+这里只解决了一行 n 个子元素宽度相等，且近似等于 a4 纸宽度的 1/n 的情况。
+
+import html2Canvas from "html2canvas";
+import JsPDF from "jspdf";
+
+export function exportAssetPdf(title, id) {
+  let content = document.querySelector(`#${id}`);
+  let first = content.firstElementChild.firstElementChild;
+  let second = content.lastElementChild;
+  oneNodeMultipleChildren(title, content, [first, second]);
+}
+
+export function oneNodeMultipleChildren(title, content, nodes) {
+  html2Canvas(content, {
+    scale: 2,
+  }).then(function (canvas) {
+    let PDF = new JsPDF("", "mm", "a4");
+    let position = 0;
+    let contentWidth = canvas.width;
+    let contentHeight = canvas.height;
+    let proportion = 200 / content.offsetWidth;
+    let currentHeight = 0;
+    let imgWidth = 200;
+    let imgHeight = (200 / contentWidth) * contentHeight;
+    let pageData = canvas.toDataURL("image/jpeg", 1.0);
+    let sameIndex = 1;
+    let widthX = 1;
+
+    for (let i = 0; i < nodes.length; i++) {
+      for (let j = 0; j < nodes[i].children.length; j++) {
+        let childHeight = (nodes[i].children[j].offsetHeight + 8) * proportion;
+        let childWidth = nodes[i].children[j].offsetWidth * proportion;
+        if (sameIndex === 1) {
+          widthX = Math.round(200 / childWidth);
+        }
+        if (sameIndex < widthX) {
+          childHeight = 0;
+          sameIndex++;
+        } else {
+          sameIndex = 1;
+        }
+
+        if (currentHeight + childHeight > 287) {
+          addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
+          position -= currentHeight;
+          if (position >= -contentHeight) {
+            PDF.addPage();
+          }
+          currentHeight = childHeight;
+        } else {
+          currentHeight += childHeight;
+        }
+      }
+    }
+    addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
+    PDF.save(title + ".pdf");
+  });
+}
+
+function addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight) {
+  PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); // 在当前pdf页添加图片
+  PDF.setFillColor(255, 255, 255); // 遮挡的颜色
+  PDF.rect(0, currentHeight, 210, Math.ceil(297 - currentHeight), "F"); // 添加空白遮挡
+}
+4.添加左右间距和页眉页脚
+为了美化 pdf 布局，上下左右留白，就需要添加左右间距和页眉页脚：减少 html 缩小至 a4 纸大小时的比例和 canvas 缩小至 a4 纸大小时宽高，增加偏移量，并对页眉页脚进行空白遮挡。
+
+import html2Canvas from "html2canvas";
+import JsPDF from "jspdf";
+
+export function exportAssetPdf(title, id) {
+  let content = document.querySelector(`#${id}`);
+  let first = content.firstElementChild.firstElementChild;
+  let second = content.lastElementChild;
+  oneNodeMultipleChildren(title, content, [first, second]);
+}
+
+export function oneNodeMultipleChildren(title, fNode, sNode) {
+  html2Canvas(fNode, {
+    scale: 2,
+  }).then(function (canvas) {
+    let PDF = new JsPDF("", "mm", "a4");
+    let position = 0;
+    let contentWidth = canvas.width;
+    let contentHeight = canvas.height;
+    let proportion = 200 / fNode.offsetWidth; // 减少10mm
+    let currentHeight = 0;
+    let imgWidth = 200; // 减少10mm
+    let imgHeight = (200 / contentWidth) * contentHeight; // 减少10mm
+    let pageData = canvas.toDataURL("image/jpeg", 1.0);
+    let sameIndex = 1;
+    let widthX = 1;
+
+    for (let i = 0; i < sNode.length; i++) {
+      for (let j = 0; j < sNode[i].children.length; j++) {
+        let childHeight = (sNode[i].children[j].offsetHeight + 8) * proportion;
+        let childWidth = sNode[i].children[j].offsetWidth * proportion;
+        if (sameIndex === 1) {
+          widthX = Math.round(200 / childWidth); // 减少10mm
+        }
+        if (sameIndex < widthX) {
+          childHeight = 0;
+          sameIndex++;
+        } else {
+          sameIndex = 1;
+        }
+
+        if (currentHeight + childHeight > 287) {
+          // 减小10mm
+          addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
+          position -= currentHeight;
+          if (position >= -contentHeight) {
+            PDF.addPage();
+          }
+          currentHeight = childHeight;
+        } else {
+          currentHeight += childHeight;
+        }
+      }
+    }
+    addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight);
+    PDF.save(title + ".pdf");
+  });
+}
+
+function addImage(PDF, pageData, position, imgWidth, imgHeight, currentHeight) {
+  PDF.addImage(pageData, "JPEG", 5, position + 5, imgWidth, imgHeight); // 增加偏移量
+  PDF.setFillColor(255, 255, 255);
+  PDF.rect(0, 0, 210, 4, "F"); // 添加页眉遮挡
+  PDF.rect(0, currentHeight + 5, 210, Math.ceil(292 - currentHeight), "F"); // 添加页脚遮挡
+}
+成果展示
+不同缩放下导出 PDF 对比：
+
+
+----------------------------------------------------------------------
+import html2Canvas from "html2canvas";
+import JsPDF from "jspdf";
+
+class PdfLoader {
+    /**
+     * PDF导出工具类
+     * @param {HTMLElement} ele - 要导出为PDF的DOM元素
+     * @param {string} pdfFileName - 导出的PDF文件名(不带扩展名)
+     * @param {string} [splitClassName] - 用于分页判断的类名(可选)
+     * @param {number} [scrollWidth] - 容器滚动宽度(可选)
+     * @param {Object} [options] - 配置选项
+     * @param {number} [options.scale=2] - 缩放比例
+     * @param {number} [options.dpi=300] - DPI设置
+     * @param {number} [options.margin=20] - PDF页边距
+     * @param {boolean} [options.useCORS=true] - 是否使用CORS
+     * @param {boolean} [options.allowTaint=true] - 是否允许污染画布
+     */
+    constructor(ele, pdfFileName, splitClassName, scrollWidth, options = {}) {
+        if (!ele || !pdfFileName) {
+            throw new Error("必须提供有效的DOM元素和PDF文件名");
+        }
+
+        this.ele = ele;
+        this.pdfFileName = pdfFileName;
+        this.splitClassName = splitClassName;
+        this.scrollWidth = scrollWidth || ele.scrollWidth || ele.offsetWidth;
+
+        this.A4_WIDTH = 595;
+        this.A4_HEIGHT = 842;
+
+        this.options = {
+            scale: 2,
+            dpi: 300,
+            margin: 20,
+            useCORS: true,
+            allowTaint: true,
+            ...options
+        };
+    }
+
+    /**
+     * 生成PDF并下载
+     * @returns {Promise<void>}
+     */
+    async outPutPdfFn() {
+        try {
+            await this._preprocessForPagination();
+
+            const canvas = await this._generateCanvas();
+
+            this._cleanupPreprocessElements();
+
+            const pdfData = await this._generatePdfFromCanvas(canvas);
+
+            return pdfData;
+        } catch (error) {
+            console.error("生成PDF时出错:", error);
+            throw error; // 重新抛出错误以便外部处理
+        }
+    }
+
+    /**
+     * 预处理：添加分页标记
+     * @private
+     */
+    async _preprocessForPagination() {
+        if (!this.splitClassName) return;
+        const childList = this.ele.getElementsByClassName(this.splitClassName);
+        const eleBounding = this.ele.getBoundingClientRect();
+        const pageHeight = (this.scrollWidth / this.A4_WIDTH) * this.A4_HEIGHT;
+        let pageNum = 1;
+
+        for (const node of childList) {
+            const bound = node.getBoundingClientRect();
+            const diff2Ele = bound.top - eleBounding.top;// 当前元素距离容器顶部距离
+            const shouldInPage = Math.ceil((bound.bottom - eleBounding.top) / pageHeight);
+
+            if (pageNum < shouldInPage) {
+                pageNum = shouldInPage;
+                // console.log(pageNum, shouldInPage);
+                // console.log(bound.bottom, eleBounding.top,pageHeight);
+
+                const parentNode = node.parentNode;
+                const emptyNode = this._createEmptyNode(pageHeight, pageNum, diff2Ele);
+                const pageHead = this._createPageHeadNode();
+
+                parentNode.insertBefore(emptyNode, node);
+                parentNode.insertBefore(pageHead, node);
+            }
+        }
+    }
+
+    /**
+     * 创建空节点用于分页
+     * @private
+     */
+    _createEmptyNode(pageHeight, pageNum, diff2Ele) {
+        const emptyNode = document.createElement("div");
+        emptyNode.className = "emptyDiv";
+        emptyNode.style.background = "transparent";
+        emptyNode.style.width = "100%";
+        emptyNode.style.height = `${pageHeight * (pageNum - 1) - diff2Ele + this.options.margin}px`;
+        return emptyNode;
+    }
+
+    /**
+     * 创建页眉节点
+     * @private
+     */
+    _createPageHeadNode() {
+        const pageHead = document.createElement("div");
+        pageHead.className = "pageHead";
+        pageHead.innerHTML = `<h3 style="margin: 0; padding: 0;">${this.pdfFileName}</h3>`;
+        return pageHead;
+    }
+
+    /**
+     * 生成canvas
+     * @private
+     */
+    _generateCanvas() {
+        return html2Canvas(this.ele, {
+            width: this.scrollWidth,
+            height: this.ele.offsetHeight,
+            scale: this.options.scale,
+            dpi: this.options.dpi,
+            useCORS: this.options.useCORS,
+            allowTaint: this.options.allowTaint,
+            logging: false, // 关闭日志提高性能
+        });
+    }
+
+    /**
+     * 清理预处理添加的DOM元素
+     * @private
+     */
+    _cleanupPreprocessElements() {
+        if (!this.splitClassName) return;
+
+        const emptyNodes = this.ele.querySelectorAll('.emptyDiv');
+        const headNodes = this.ele.querySelectorAll('.pageHead');
+
+        emptyNodes.forEach(item => item.parentNode?.removeChild(item));
+        headNodes.forEach(item => item.parentNode?.removeChild(item));
+    }
+
+    /**
+     * 从canvas生成PDF
+     * @private
+     */
+    _generatePdfFromCanvas(canvas) {
+        return new Promise((resolve) => {
+            const contentWidth = canvas.width;
+            const contentHeight = canvas.height;
+            const pageHeight = (contentWidth / this.A4_WIDTH) * this.A4_HEIGHT;
+            const imgWidth = this.A4_WIDTH - this.options.margin;
+            const imgHeight = (this.A4_WIDTH / contentWidth) * contentHeight;
+            const pageData = canvas.toDataURL('image/jpeg', 1.0);
+
+            const pdf = new JsPDF('', 'pt', 'a4');
+            let restHeight = contentHeight;
+            let position = 0;
+
+            if (restHeight < pageHeight) {
+                // 单页
+                // addImage(pageData, 'JPEG', 左，上，宽度，高度)
+                pdf.addImage(pageData, 'JPEG', this.options.margin / 2, this.options.margin, imgWidth, imgHeight);
+            } else {
+                // 多页
+                while (restHeight > 0) {
+                    pdf.addImage(pageData, 'JPEG', this.options.margin / 2, position + this.options.margin, imgWidth, imgHeight);
+                    restHeight -= pageHeight;
+                    position -= this.A4_HEIGHT;
+
+                    if (restHeight > 0) {
+                        pdf.addPage();
+                    }
+                }
+            }
+
+            // 保存PDF
+            pdf.save(`${this.pdfFileName}.pdf`);
+            resolve();
+        });
+    }
+}
+
+export default PdfLoader;
+
+
+
+
+
+
+
+第三步，在需要的页面导入该js，并引用
+
+xml 体验AI代码助手 代码解读复制代码 <template>
+  <div>
+    <div>这一块是其他内容</div>
+    <div class="v-pdfwrap">
+      <div class="element">
+        <p>报告日期：2199-13-14</p>
+      </div>
+      <div class="element">
+        <A />
+      </div>
+      <div class="element">
+        <B />
+      </div>
+      <div class="element">
+        <C />
+      </div>
+      <div class="element">
+        <D />
+        <E />
+      </div>
+      <div class="element">
+        <F />
+      </div>
+      <div class="element">
+        <PartG />
+      </div>
+      <div class="element">
+        <PartH />
+      </div>
+      <div class="element">
+        <PartI />
+      </div>
+      <div class="element">
+        <PartJ />
+      </div>
+      <div class="element">
+        <PartK />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PdfLoader from '@/utils/pagetopdf.js';
+import A from "./A.vue";
+import B from "./B.vue";
+import C from "./C.vue";
+import D from "./D.vue";
+import E from "./E.vue";
+import F from "./F.vue";
+import PartG from "./PartG.vue";
+import PartH from "./PartH.vue";
+import PartI from "./PartI.vue";
+import PartJ from "./PartJ.vue";
+import PartK from "./PartK.vue";
+export default {
+  data() {
+    return {
+    };
+  },
+  components: {
+    A, B, C, D, E, F, PartG, PartH, PartI, PartJ, PartK
+  },
+  watch: {
+  },
+  methods: {
+    exportPDF() {
+      let pdf = new PdfLoader(
+        document.querySelector(".v-pdfwrap"),
+        "pdf名",
+        "element",
+        1920
+      );
+      pdf.outPutPdfFn().then(() => {
+        console.log('PDF生成完毕');
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss"></style>
+
+作者：劫大大
+链接：https://juejin.cn/post/7533145564751855670
+来源：稀土掘金
+著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。