关于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.getPdf = function(file_id, file_title) {
      const title = file_title
      const Dom_height = $('#' + file_id).height() //获取要截取的dom元素内容高度
      const outer_height = $('#' + file_id).outerHeight() //获取dom元素的外部高度
      const window_height = window.screen.availHeight //窗口高度
      // console.log($('#' + file_id).height())
      html2Canvas(document.querySelector('#' + file_id), {
        allowTaint: true,
        // height: window.screen.availHeight,
        height: Dom_height < window_height ? window_height : outer_height, //canvas画布的具体高度
        /*以上这个高度非常重要，如果dom内容高度在窗口高度内的话，那就用窗口高度，
        确保把当前页的内容都截取，如果超过一页，那就用外部高度*/
        windowHeight: document.getElementById(file_id).scrollHeight, 
        y: window.pageYOffset - 30 //页面在垂直方向的滚动距离
      }).then()
      //不用理会then中的内容，主要改动在html2Canvas中
 }

（二）element表格缺少线条

这个从html2canvas官网文档就能知道，主要是因为不支持element表格中的样式，具体样式就是border-bottom这个样式属性，要解决，只能手动把这个样式改为border，至于如何改变element的样式，网上方法有很多，这里我个人推荐的是用id选择器+class选择器的方式改变，避免污染全局样式:

<style lang="scss">
#quotesList{
    .el-table td, .el-table th.is-leaf{
        border: 1px solid #EBEEF5
    }
    .el-table--border th, .el-table__fixed-right-patch{
        border: 1px solid #EBEEF5
    }
}
style>

注意不要加scoped，因为用了id选择器基本不会有全局污染了，id也就是你要转换pdf内容的那个父容器的id。