关于Vue中生成pdf的注意事项，内容缺失，样式缺失等

一、背景

近日接到一个需求是把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 'jquery'

Vue.prototype.get