在html页面中js动态输出显示不全,html2canvas+jspdf导出pdf,解决导出PDF不全的问题...

本文介绍了在HTML页面中使用js动态输出内容时遇到显示不全的问题,以及如何利用html2canvas和jspdf组合导出完整PDF的解决方案。针对页面滚动条以下内容丢失的情况,提出了一种通过创建与目标元素相同大小的div并调整canvas高度的方法,成功避免了内容丢失。最后给出了关键代码示例。
摘要由CSDN通过智能技术生成

前端目前网上可以查到的主要方案就是,用html2cavans先将页面在canvas中绘制,然后canvas转图片资源,再用jspdf将图片转PDF;

这种方式的优点就是解决了jspdf直接转pdf时,一些图片和页面中canvas区域空白的问题;但是也存在一个问题就是直接导出可视区域,页面有滚动条的情况下,滚动条以下丢失,网上查到的解决方法有两种,但是对我的不生效;偶然调试的时候用了一种奇怪的方式解决了问题;

先说网上的解决方法,

1.用jquery的clone()方法,复制新的dom插入到body中,canvas渲染复制的dom,转图片再转pdf.能解决截图不全的问题,但是对页面本身中有canvas的部分复制出来的还是空白。

2.CNDS上有大神直接改了html2canvas源代码,说可以解决问题,但是是3年前的代码了,看了最新更新的html2canvas源码似乎没找到大神当初改的地方。

下面说重点

解决问题的这种怪异方法,有两个修改点,一个是创建一个与要导出PDF相同大小的div插入到body中,再调用html2canvas的方法,另一个点是在html2canvas的配置中给canvas设置高度。导出成功删除插入的元素。

要注意一个地方,就是要导出pdf的元素一定要有高度,百分比的高度和auto肯定会出问题,只要是html2canvas对一些css还支持不全;

贴上代码

...

...

...

exportPDF(){

let targetDom = $(&

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值