Heck's Blog

前言
最近在项目中，有一个导出pdf功能，需要纯前端来实现，调研了多种pdf导出方式，最终决定使用html2canvas+jsPDF来实现需求。

本文就简单介绍一下html2canvas+jsPDF导出pdf的实现，网上大部分实现导出pdf都是以分页为主的，本文还将附上不分页导出pdf的实现方法。(只附js代码)

html2canvas+jsPDF导出pdf原理：通过html2canvas将遍历页面元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf。



安装：
npm install html2canvas --save

npm install jsPDF --save



配置：
main.js文件里面配置（引入、挂载）

import html2canvas from 'html2canvas'
import jsPDF from 'jsPDF '
Vue.prototype.html2canvas = html2canvas
Vue.prototype.jsPDF = jsPDF
或者--------------------------------------------------------------------------------

index.html页面直接引入js文件：

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>