新浪博客

基于jspdf插件实现页面导出成pdf功能

2017-02-24 00:04阅读:
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。并可以指定导出区域。
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格式最理想,但是不支持中文。

我的更多文章

下载客户端阅读体验更佳

APP专享