jspdf + highcharts 实现导出存在highcharts图表的html页面

  • Post author:
  • Post category:其他


经过一系列的研究,搜集资料,终于实现了导出含有highcharts图表的html页面到pdf,但还是存在一些问题,jspdf不支持中文,导出的pdf第一次打开关闭时总是问是否保存,还有就是pdf画板的宽度,试了调大一点,但不成功,只能改变窗口的大小到600px左右去配合。



思路:


1. highcharts生成图表


2.获取图表的svg,并创建一个canvas元素,使用canvg把svg转成

canvas



3.

canvas转成image DataURL,把图表替换成转换后的image。





4.使用jspdf把html页面导出到pdf格式。(jspdf里面有例子:jsPDF-master/examples/html2pdf/showcase_supported_html.html ,要想把输出到页面改为导出,则把html2pdf的响应函数里面的代码改为 pdf.save(‘Test.pdf’); 就行)


另外,要注意的是jspdf有点坑,我修改例子里的config.js文件,让”html2pdf“只加载dist文件夹里的jspdf.min和html2canvas,但是一直报require的错,看了下,jspdf.min.js文件里也包含了config的一些设定,找到”require.config“,把跟”html2pdf“这个例子相关的那段代码删了就不报错了。相关文件的路径也是要修改一下的。

如果有哪位研究出以下几点烦请告知,谢谢。

1.怎么让jspdf支持中文

2.调整pdf 取样画板的宽度

3.导出的pdf 打开关闭时不弹出询问保存。

资料参考: http://stackoverflow.com/questions/25630811/export-highcharts-to-pdf-using-javascript-and-local-server-no-internet-connec



版权声明:本文为JKwinson原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。