前端HTML转PDF生成的PDF上边会有留白,下边截取不全

本文介绍了在前端使用jspdf和html2canvas将HTML转换为PDF时遇到的页面截图不完整和留白问题。通过设置canvas水印、处理滚动条位置以及分页显示来解决这些问题。作者分享了具体的解决步骤和代码片段,提醒开发者在导出PDF时与后台沟通以避免可能的问题。
摘要由CSDN通过智能技术生成

html2canvas生成的图片不完整

  • 笔者在最近四月份的时候找到了一份前端开发的工作,是个小规模公司,目前只有我一个前端开发,所以会遇到各种莫名其妙的问题,今天有时间,抽空总结一下(PS: 虽然不会有人看~~,但是可以自己记下以后备用)
  1. 前端页面生成PDF格式,并且可以下载。
  • 由于后台工作比较繁重,所以打算前端单独做这个功能,起步其实还好,照着网上搜索到的代码,用 jspdfhtml2canvas 这两个插件做的,顺口一提,我们用的框架为Vue,然后组件库是iView。
    放上教程地址:前端实现HTML转为PDF
  • 同时公司还要求要有水印,笔者用了两个canvas。给大家介绍下具体步骤:
    1.用 jspdf 创建一个 PDF 页面,个人理解就是弄了张白纸
    2.然后新建一个canvas用来充当水印,设置字体后,置入页面内
    3.这个时候执行 html2canvas 会将你放在 #pdfDom 中的页面元素生成一张图,将这张图再置于页面。
  • 而Bug的问题就在于,每次我生成的 PDF 总是会丢三落四,也就是有时是完整的,而有时又是残缺的,经过半天的摸索,察觉到是滚动条的原因,在 html2canvas 这个方法执行时,页面必须在最左上角,才可以截图成功,否则,就会以
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值