jspdf实现html5导出pdf

步骤一：

vue安装插件（不是vue的不需要安装）：

npm install html2canvas --save-dev;
npm install jspdf --save-dev;

vue引用插件（不是vue用下面的引用js）

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

html5引用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>

步骤二：

创建个方法，方法内放入以下代码（调用此方法时则会生成pdf）

注意：你要将哪块内容生成pdf，就给哪个div（或其它标签）设置加上id="mainBox"

html2canvas(document.getElementById('mainBox'),{
				// 导出pdf清晰度
				allowTaint: true,
				taintTest: false,
				scale: '2',
				dpi: '192',
				background: '#fff',
				// 开启跨域配置
				useCORS: true
			}).then(function(canvas) {
				let contentWidth = canvas.width;
				let contentHeight = canvas.height;
				// 一页pdf显示html页面生成的canvas高度;
				let pageHeight = contentWidth / 592.28 * 841.89;
				// 未生成pdf的html页面高度
				let leftHeight = contentHeight;
				// pdf页面偏移
				let position = 0;
				// html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
				let imgWidth = 595.28;
				let imgHeight = 592.28 / contentWidth * contentHeight;

				let pageData = canvas.toDataURL('image/jpeg', 1);
				let pdf = new jsPDF('', 'pt', 'a4');

				// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
				// 当内容未超过pdf一页显示的范围，无需分页
				if (leftHeight < pageHeight) {
					pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
				} else {
					while (leftHeight > 0) {
						pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
						leftHeight -= pageHeight;
						position -= 841.89;
						// 避免添加空白页
						if (leftHeight > 0) {
							pdf.addPage();
						}
					}
				}
				// 生成的pdf名称（当前时间戳）
				pdf.save('pdf_' + (new Date()).valueOf() + '_.pdf');
			});