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

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

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



思路:

1. highcharts生成图表

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

[b]3.[b]canvas转成image DataURL,把图表替换成转换后的image。[/b][/b]

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

另外,要注意的是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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息