文 中 内容 是在 Vue 项目 中 使用 html 2canvas和 jspdf 插件实现将页面的 内容 生成 PDF ，并记录在 使用 过程 中 遇到的一些 问题 和 解决方案 。文 中 将会贴出很多参考文章，如果各位有需要，可以前往原文章查阅。 html 2canvas + jspdf 介绍 使用 方法 分页 分割 问题 html 2canvas生成图片只有一半其他参考文章 1、 html 2canvas 该插件允许我们直接在浏览器上对网页或其部分进行“截图”操作，但是屏幕截图基于 DOM，这一点很关键。这就会导致截图的结果，很可能不是自己想要的。.

如果不是有特别的需求，比如打印或者 分页 ，还是建议能在一页显示 pdf ，这样就避免了 文字 被 截断 的风险。 不做 分页 处理 html 2canvas(copyDom[0], opts).then((canvas) => { debugger var contentWidth = canvas.width; var contentHeight =...

原文：https://blog.csdn.net/pratise/article/details/79249943 https://www.jianshu.com/p/96a7ee1341be 1 、我们要添加两个模块 第一个.将页面 html 转换成图片 npm install --save html 2canvas 第二个.将图片生成 pdf npm install jspdf --save 2、定义全局函数..创建一个 html To Pdf .js文件在指定位置.我个人习惯放在('src/compon..

Vue 使用 html 2canvas和 jsPDF 可以实现将网页 内容 导出 为 PDF 文件的功能。具体步骤如下： 1.安装 html 2canvas和 jsPDF 库，可以 使用 npm或yarn进行安装。 2.在需要 导出 PDF 的组件 中 引入 html 2canvas和 jsPDF 库。 3.封装一个方法， 使用 html 2canvas将需要 导出 的 内容 转换为canvas，再 使用 jsPDF 将canvas转换为 PDF 文件并下载。 下面是一个示例代码： <template> <!-- 需要 导出 为 PDF 的 内容 --> <div ref="content"> <h1>Hello, World!</h1> <p>This is a PDF export example.</p> <button @click="export PDF ">Export PDF </button> </template> <script> import html 2canvas from ' html 2canvas'; import jsPDF from ' jspdf '; export default { methods: { export PDF () { // 获取需要 导出 的 内容 const content = this.$refs.content; // 使用 html 2canvas将 内容 转换为canvas html 2canvas(content).then(canvas => { // 将canvas转换为 PDF 文件 const pdf = new jsPDF ('p', 'mm', 'a4'); const imgData = canvas.toDataURL('image/png'); pdf .addImage(imgData, 'PNG', 0, 0, 210, 297); pdf .save('export. pdf '); </script>