一、背景
近日接到一个需求是把element表格内容输出成pdf,在网上找了许多方案,主要是利用html2canvas
+ jspdf
来实现的比较多,然而一方面由于html2canvas
对某些css样式有支持缺陷之外,canvas本身截取的内容也非常多坑,所以借此机会记录一下
二、踩坑记录
(一)pdf生成的内容缺失,不完整
首先,如果你的pdf内容和我一样,到了页面大概1/2或2/3的位置就断掉,那么基本可以确定问题是出在canvas截取片段的过程上了。网上很多教程都是直接叫在vue
中生成一个htmlToPdf.js
的文件,然后在里面直接把方法挂载到vue
的property
上引用,但是其实里面还缺少了一些设置。
如果你导出的也是element的表格,那么首先你的表格会没有线条,其次,会在某处横截掉,如下:
出现这个问题主要原因就是canvas画布在截图之前的高度有问题,以及开始截图的位置有问题。这里就需要引入jquery来辅助一下了:
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import $ from