相信各位前端工程狮们在一些报表项目,管理系统项目中都会遇到在这样的需求:申请报、表格、简历等等图文信息有导出为PDF文件。下面是记录我在项目中完成该需求的代码dome,发布出来也是希望对大家有些帮助。
1,整体思路
将HTML元素打印或导出为PDF文件,无非就是提取元素页面内容,然后转化为图片,将图片保存为PDF文件。
2,准备工作
将HTML元素转化为图片:html2canvas.js 插件;
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
导出为PDF文件:jspdf.js插件:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
3,dome
HTML:
<button id="btn">导出为PDF文件</button>
<div id="pdfDom">
<table>
<th></th>
</table>
<ul id="box"></ul>
</div>
JavaScri