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