（已解决）jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）

阳光宅男xxb

已于 2024-05-31 17:44:07 修改

阅读量3.3k

点赞数 13

分类专栏：程序开发常见问题汇总文章标签： javascript pdf 导出分割高清

于 2024-05-30 15:41:41 首次发布

本文链接：https://blog.youkuaiyun.com/c1007857613/article/details/139319747

版权

程序开发常见问题汇总专栏收录该内容

45 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何利用jspdf和html2canvas在JavaScript中实现在客户端将HTML页面导出为高清PDF文件，同时解决图片、表格跨页和滚动条导致的内容丢失问题。通过设定特定CSS类并计算各元素高度，确保内容完整无损地分页显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、项目背景

最近项目中需要实现将html页面的数据导出到pdf文件，并提供给客户端下载。在查找了一些资料之后，打算使用jspdf + html2canvas的技术实现，原因在于这种方式主要由客户端完成，可以减少服务器的压力，缺点就是导出pdf的速度不是很快，因为它主要是通过截图的方式实现的。

二、实现过程

1、首先需要在页面上导入相应的js库：

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>

    主要是需要要用到html2canvas.min.js和jspdf.debug.js这两个js。我们已在线的方式引入，没有直接放到项目中。

2、确定要导

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阳光宅男xxb

关注关注

13
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案

人生代码 ---- 公众号

11-21

2505

欢迎关注我的公众号《人生代码》我有一个大胆的想法，我要一直写到死，那一天我不写了，可能就死了。哈哈。哈喽，大家好，我是你们的攻城狮，人贱人爱的 Ken，一个永远充满激情的人。最近接收到一...

王二红

12-21

6017

vue2，区域打印，前端页面局部转pdf，页面局部打印预览，vue如何实现指定区域打印及导出pdf，只打印一小部分并非全部，指定区域范围内导出生成PDF文件，打印div指定区域内容并保留css样式，可以预览打印机和下载pdf文件，打印指定DOM元素内的内容，vue网页局部打印不全，打印插件Print.js，vuejspdfhtml2canvas，自定义选中页面内容导出为pdf文件，打印功能内容显示不完整，内容显示不全，表格打印不全的问题，空白页，指定div页面转为pdf文件，解决页面样式不出现或者tab

参与评论您还未登录，请先登录后发表或查看评论

喜欢就拿走jspdf+html2canvas生成下载pdf，不需要别的乱七八糟的东西。

12-10

jspdf+HTML2canvas生成pdf的两个小小的js，下载简单不需要搞一些乱七八糟的东西。

网页导出 pdf 内容被截断的终极解决方案

04-11

html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案，设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是从这里开始截断，将这个高度开始将往下的内容都放到下一页，设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是从这里开始截断，将这个高度开始将往下的内容都放到下一页支持自定义页眉页脚页码数

使用 html2canvas 和 jsPDF 实现 HTML 页面导出为 PDF 的完整解决方案

热门推荐

郊眠寺

09-27

1万+

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问

jspdf-html2canvas

BLUESKYHOST的博客

12-28

262

打印图片问题 import jspdfHtml2canvas from 'jspdf-html2canvas' jspdfHtml2canvas(htmlcontent, { html2canvas: { scale: 2, x: htmlcontent.getBoundingClientRect().left + 8.5, useCORS:true//这里开启图片打印 }, windowWidth: htmlcontent.offsetWidth,

前端通过 jspdf 和 html2canvas 工具将网页生成 pdf

wudandong的博客

12-13

486

由于 html2canvas 的性能问题，该方案对于页数比较多的场景生成的非常慢，可以试着使用 modern-screenshot 工具看是否性能会得到提升。执行完 doc.save 后会自动触发浏览器下载。

jsPDF-html2canvas:与jsPDF和html2canvas结合使用，可将html内容转换为PDF文件

05-16

jsPDF-html2canvas 与jsPDF和html2canvas结合使用，可将html内容转换为PDF文件。 html2PDF函数将自动将目标dom宽度调整为PDF大小。因此，无需担心溢出部分。如果内容高度超过1 pdf，它将自动将其分隔到另一个pdf页面。安装 npm i jspdf-html2canvas import html2PDF from 'jspdf-html2canvas' ; html2PDF ( node , options ) ; 由于此插件是umd模块，因此您也可以将CDN与/dist/jspdf-html2canvas.min.js结合使用，只需记住在此插件之前同时包含jspdf和html2canvas cdn即可。 < script src = "https://unpkg.com/jspdf@latest/dist/jspdf.um

jspdf.debug.js和html2canvas.js

09-14

运用jquery将html转换为pdf所用到的插件。 jspdf.debug.js和html2canvas.js

html页面导出pdf截断问题,html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案...

weixin_39639505的博客

06-03

2963

欢迎关注我的公众号《人生代码》我有一个大胆的想法，我要一直写到死，那一天我不写了，可能就死了。哈哈。哈喽，大家好，我是你们的攻城狮，人贱人爱的 Ken，一个永远充满激情的人。最近接收到一个优化需求：就是对之前的行程文档的图文介绍添加打印生成 pdf 的功能当然，我们需要依赖 html2canvas 和 jspdf.min.js 这两个库，html2canvas 是用于生成 canvas，jspdf...

html2canvas+jspdf 完美解决html导出且分页解决图片显示不全问题

08-09

7943

var pages = $(".page_re") function makeMpdf() { if (confirm("您确认下载该PDF文件吗?")) { /*1*/ // var pdf = new jsPDF('p', 'pt', 'a4'); // // 设...

html2canvas上传c,html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案

weixin_42297446的博客

06-29

547

Vue生成PDF文件攻略：html2canvas与jspdf联手，中文乱码与自动换行难题攻克

在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。

11-13

8387

在做项目时有这么一个需求，需要将当前页面指定区域的内容导出pdf到本地。使用过程中遇到的问题及解决方法。需要一个支持中文的字体ttf文件，可以在网上下载，也可以使用本地window/font/路径下的文件。选择你本地的ttf文件，点击“Create”按钮，会生成一个js文件。上面乱码解决了，但是发现中文字不会自动换行。这个还需要进一步解决。如果是直接使用jsPDF生成pdf文件，中文是乱码。在导出多页的时候，希望在页面尾部添加页码。里面有个fontconverter目录。在页面中引入js文件。

html2canvas + jspdf 纯前端HTML导出PDF的实现与问题

幸运小男神的博客

07-18

3698

这几天接到一个需求，富文本编辑器的内容不仅要展示出来，还要实现展示的内容导出pdf文件。一开始导出pdf的功能是由后端来做的，然后发现对于宽度太大的图片，导出的pdf文件里部分图片内容被遮盖了，但在前端是正常显示的，只因为class样式后端无法解析。然后，后端开发人员就嫌麻烦，让前端来实现导出pdf的功能。。。使用 html2canvas + jsPDF 纯前端导出pdf的方式还是有很多问题的，一般情况下都是后端进行文件的导出，前端配合解决样式问题。

html2canvas分页截断问题

06-28

### 回答1： html2canvas是一个开源的JavaScript库，可将网页中的元素转换为图像，以便进行截图、打印等操作。在使用html2canvas进行截图时，有时会遇到分页截断的问题。分页截断指的是当网页的内容超出一页时，html2canvas只能截取页面的一部分内容，而无法完全截取整个页面的内容。这种情况通常出现在需要打印网页的场景下。为了解决这个问题，可以使用一些方法来避免或者解决分页截断的问题。以下是一些方法： 1.使用CSS的分页属性，将内容分割成多个页面。这样，html2canvas只需截取每个页面的内容即可。 2.将页面缩小后再截取，这样可以让整个页面都能够在一个截图中完整显示。 3.使用第三方库jsPDF，将网页转换为PDF文件，然后再进行截取。这样可以完整截取整个页面的内容。总之，html2canvas的分页截断问题是一个常见的问题，但可以通过一些方法避免或解决。需要根据具体情况选择最合适的方法来解决问题。 ### 回答2： HTML2Canvas是一个常用的JavaScript库，可以将网页的内容转化为图片。但是，使用HTML2Canvas进行分页截断时，会出现一些问题。这些问题包括内容不完整、布局混乱等。通常情况下，HTML2Canvas的分页截断是根据页面的高度进行截断的。例如，如果页面高度为1000像素，当截断到800像素时，HTML2Canvas会自动将当前页面截断，并在下一页继续截断。但是，这种截断方式会存在一些问题。第一个问题是内容不完整。由于HTML2Canvas是根据页面高度进行截断的，因此当某一部分内容长度超出当前页面高度时，HTML2Canvas会将其截断，导致部分内容无法完全展示。第二个问题是布局混乱。由于页面内容的不规则性，HTML2Canvas在分页截断时可能会导致布局出现混乱。例如，某一部分内容跨越了多个页面时，分页截断会将其分为多份，导致页面布局出现错乱。解决这些问题的方法一般是自定义分页截断方式。可以通过计算页面内容的高度，将其分为多个部分，并按照一定的规则进行拼接，从而避免上述问题。这种方式需要注意页面的布局，特别是内容长度不规则的部分，在拼接时需要特别处理。总之，HTML2Canvas分页截断是一个比较复杂的问题，需要仔细处理。要想解决这个问题，需要有较深的JavaScript编程能力和对网页布局的深入认识。 ### 回答3： HTML2Canvas是一个用于将网页内容转换为Canvas图像的JavaScript库。它十分便利，可以帮助我们将一个网页截图并转换为图像。不过，使用HTML2Canvas时，我们可能遇到了分页截断问题，即无法完整地将整个网页截图，而是只能截取一部分。这个问题的解决方案如下：首先，需要使用jsPDF这个库，它可以将Canvas图像转换为PDF文件。在使用HTML2Canvas截图之前，要定义一个空数组pages[]。然后，将HTML2Canvas生成的Canvas图像分割成多个子图像，并将它们分别添加到pages[]数组中。此时，需要根据每个子图像的高度计算出它们在PDF文件中的位置。最后，将pages[]数组中的所有子图像添加到 PDF文件中即可。具体实现方法如下： ```javascript let pdf = new jsPDF("p", "mm", "a4"); let pages = []; function captureAndAddToPDF(selector) { html2canvas($(selector)[0]).then(function (canvas) { let imgData = canvas.toDataURL("image/png"); let imgWidth = pdf.internal.pageSize.width; let ratio = imgWidth / canvas.width; let imgHeight = canvas.height * ratio; let pageData = canvas.toDataURL("image/png", 1.0); pages.push(pageData); let position = 0; let imgWidth = pdf.internal.pageSize.getWidth(); let imgHeight = pdf.internal.pageSize.getHeight(); pdf.addImage(pageData, "PNG", 0, position, imgWidth, imgHeight); position -= imgHeight; }); } captureAndAddToPDF("#content"); pdf.save("output.pdf"); ``` 其中，selector为需要截图的页面元素的选择器，可以根据具体情况进行修改。以上就是解决HTML2Canvas分页截断问题的方法。需要注意的一点是，当截图过大时，PDF文件可能会非常大，建议将该部分代码封装为单独的函数，只对需要截图的部分进行截图。