vue使用html2canvas导出图片转为pdf以及过程中滚动条内容无法获取的问题

今天做了一个需求， 需要把一些数据导出为pdf，在网上看了很多的导出方法，都是通过html2canvas + jspdf来制作的 ，但是在因为没有详情，做好后发现有滚动条的地方没有生成图片，找了很多文章都没有解决，然后自己梳理了一遍代码，也把关于滚动条的问题写了一下，有兴趣的可以看看。

首先安装 html2canvas 这个作用是实现将 html 页面转换成 图片

npm install --save html2canvas

然后是 jspdf 这个插件的作用是将图片转为 pdf

npm install jspdf --save

 安装好后，在你的项目里创建一个js文件，项目里应该会有个专门放js文件的公共文件夹，或者自己生成一个也可以，我这里的是  /src/utils/toPdf.js
然后直接把这段代码 CV过去就行

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default{
  install(Vue, options) {
    Vue.prototype.getPdf = function(vvv) {
      var title = vvv || '导出'
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function(canvas) {
        const contentWidth = canvas.width //画布宽度（#pdfDom宽度）
        const contentHeight = canvas.height //画布高度（#pdfDom高度）
        const pageHeight = contentWidth / 595 * 842 // 页面高度 = 画布宽度/a4宽*a4高
        let leftHeight = contentHeight // 左侧高度 = 画布高度
        let position = 0 // 位置
        const imgWidth = 595 // 每张pdf宽度为 a4 宽度
        const imgHeight = 595 / contentWidth * contentHeight // 每张图片高度 = a4宽度 / 画布宽度 * 画布高度
        const pageData = canvas.toDataURL('image/jpeg', 1.0) // 将div内容转为图片
        const PDF = new JsPDF('', 'pt', 'a4') // 调用jspdf插件
        if (leftHeight < pageHeight) { // 当画布高度小于页面高度时
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) // 将图片转为pdf
        } else {
          while (leftHeight > 0) { // 当画布高度大于0时进入循环
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) // 从位置 0 生成图片
            leftHeight -= pageHeight // 画布高度 -= 页面高度  当图片生成后 页面还有内容没有生成图片的时候
            position -= (842) // 从第二张a4纸的高度开始生成图片
            if (leftHeight > 0) { // 当画布高度大于0时生成第二页
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf') // 导出pdf 命名
      }
      )
    }
  }
}

我写的比较细，里面每一步的步骤和参数都列举出来了，

接下来在main.js中引入 topdf.js 就可以了

// 引入pdf导出
import toPdf from './utils/topdf'
Vue.use(toPdf)

 然后就可以在页面中使用了， 因为我在js中声明了方法，所以直接调用getPdf()就可以

<div id="pdfDom">
	// 里面的内容就是导出为pdf的内容
</div>

<el-button @click="getPdf('文件名称')">导出PDF</el-button>

 在导出时，有时候会出现导出内容有滚动条的话导出内容不全，只能导出可视部分，滚动条隐藏掉的内容不会展示出来，这个问题我也看了很多的文档，发现都没有什么好的方法可以解决，所以我的解决方法就是：把含有滚动条的内容放在页面外部，这样就可以了，但还有问题就是会导致导出的内容不全，但还能克服，如果以后有什么比较好的解决方法麻烦踢我一脚。

<div class="content">
    <div id="pdfDom">
	    // 里面的内容就是导出为pdf的内容
        <div>
            需要导出的内容
            // 手写滚动条（手动狗头🐕）
        </div>
    </div>
</div>

<el-button @click="getPdf('文件名称')">导出PDF</el-button>




<script>
    .content {
        height: calc( 100vh - 100px);
    }
</script>
// 简单来说就是用pdfDom把出现滚动条的内容包裹起来。