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
思路:
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
相关文章推荐
- 简单的jQuery.jqprint插件实现打印HTML页面,页面导出为PDF文件
- js 实现html 页面导出excel
- js实现html页面转为pdf下载
- html to pdf - 使用Wkhtmltopdf.exe - 实现,可导出需登录的页面
- JS 如何将 HTML 页面导出为 PDF
- js--图表--highcharts 页面导出按钮汉化
- JS 如何将 HTML 页面导出为多页 PDF
- 用js 将当前html页面导出pdf
- 两种方法实现在HTML页面加载完毕后运行某个js
- 让html页面不缓存js的实现方法
- Java实现HTML页面转PDF解决方案
- ASP.NET C#根据HTML页面导出PDF
- 通过Dreamweaver画图把android复杂多点击的页面转换成html,再通过android和js的交互实现点击
- jsoup+htmlUnit可以实现抓取执行过js的html页面
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- (Java实现)HTML页面转PDF解决方案
- jasperreport实现Html、Pdf、Rtf、Excel、Xml报表导出
- JS实现页面HTML内容以另存为的文件形式下载保存
- 纯js实现html转pdf
- 将HTML页面部分内容导出为PDF