加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

基于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。并可以指定导出区域。

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格式最理想,但是不支持中文。


0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有