您的位置:首页 > Web前端 > JavaScript

用js 将当前html页面导出pdf

2018-01-07 16:45 555 查看
引入的js

<script src="./js/libs/jquery-2.0.2.js"></script>
<script src="./js/exportpdf/jspdf.debug.js"></script>
<script src="./js/exportpdf/html2canvas.js"></script>
1. function downloadPdf(){
2.         html2canvas($('#appmsg'), {  //appmsg 为选择要导出的页面id样式
3.         height:3000,
4.         onrendered: function(canvas) {
5.             var imgData = canvas.toDataURL('img/notice/png');
6.             var doc = new jsPDF('p', 'px','a4');
7.             //第一列 左右边距  第二列上下边距  第三列是图片左右拉伸  第四列 图片上下拉伸
8.             doc.addImage(imgData, 'PNG', 10, 0,420,0);
9.             doc.addPage();  //增加新一页
10.             doc.addImage(imgData, 'PNG', 10, 0,420,0);
11.             doc.save('test.pdf');
12.         }
13.     });

html2canvas 是将当前页面转换成图片;

$('#appmsg') 是要转换为图片的页面范围;

height:5000,这个高度要根据页面的大小灵活调整;

var doc = new jsPDF('p', 'px','a3'); p:横向,a3:纸张大小,默认是a4;

doc.addImage(imgData, 'PNG', -9, 0,650,1500);将转换后的图片放到pdf文档上,后面四个参数可根据实际效果灵活调整;

doc.addPage(); 一页pdf显示不完整的时候,新增一页;

参考链接 http://blog.csdn.net/w20228396/article/details/55258544
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  pdf