基于jspdf插件实现页面导出成pdf功能
(2017-02-24 00:04:58)分类: js(jqueryajax) |
1、项目背景:
对客户报修记录进行分类统计,并生成各种饼图、柱状图、线性图。并要求导出word,并打印。html里面内容是通过js刷新出来的,是动态的数据。
2、项目难点:
1)html导出到word,不太可能,页面比较复杂,内容比较多,而且word不支持。
2)html页面存在多个 echart图表,根本无法导出。
3、折中方案
采用jspdf插件,将html页面导出成pdf,在打印pdf。 效果不是特别理想,但是还过的去。
4、具体操作
1)下载jspdf插件,官网有。
2)html页面引用两个js文件 jspdf.debug.js 和 html2canvas.js
(利用该插件将html页面转化成图片,在插入到pdf中)
3)编写一个js方法 即可实现 转化pdf。并可以指定导出区域。
对客户报修记录进行分类统计,并生成各种饼图、柱状图、线性图。并要求导出word,并打印。html里面内容是通过js刷新出来的,是动态的数据。
2、项目难点:
1)html导出到word,不太可能,页面比较复杂,内容比较多,而且word不支持。
2)html页面存在多个 echart图表,根本无法导出。
3、折中方案
采用jspdf插件,将html页面导出成pdf,在打印pdf。 效果不是特别理想,但是还过的去。
4、具体操作
1)下载jspdf插件,官网有。
2)html页面引用两个js文件 jspdf.debug.js
3)编写一个js方法 即可实现 转化pdf。并可以指定导出区域。
function printReportPdf () {
if(confirm("您确认下载服务报告模板?")){
// 设置打印比例 越大打印越小 var pdf = new jsPDF('p','pt','a4');
pdf.internal.scaleFactor = 2; var options = { pagesplit: true, // 设置是否自动分页 "background": '#FFFFFF' // 如果导出的pdf为黑色背景,需要将导出的html模块内容背景 设置成白色。 }; var printHtml = $('#pdfsdContnent').get(0); // 页面某一个div里面的内容,通过id获取div内容 pdf.addHTML(printHtml,15, 15, options,function() {
pdf.save('服务总结报告.pdf'); }); }
pdf.fromHTML() 方法,导出的pdf格式最理想,但是不支持中文。