Vue使用html2canvas和jspdf生成pdf文件

上篇刚写了html2canvas用法：使用html2canvas将页面或某个dom元素保存/下载为图片感兴趣可以去看下。

首先jspdf这个库就是用来生成pdf的，那为什么还需要使用到html2canvas。是因为jspdf直接生成pdf的话，用法可能会有些繁琐，并且可能不能保证原来的样式，不美观，也不满足需求。

所以我们先使用html2canvas将目标dom元素转为canvas，然后调用canvas的toDataURL方法将其转为base64编码，然后再将图片添加到pdf中就可以了。

1. 安装

pnpm add html2canvas
pnpm add jspdf

2. 引入  

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

3. 封装使用 

我这里将生成pdf方法单独封装在generatePdf.js文件中，向外导出这个方法拱外界使用 

generatePdf.js