首页 > 其他 > 详细

纯前端导出pdf文件

时间:2018-01-07 23:54:45      阅读:351      评论:0      收藏:0      [点我收藏+]

纯前端js导出pdf,已经用于生产环境。

工具: 1、html2canvas,一种让html转换为图片的工具。

  2、pdfmake或者jspdf ,一种生成、编辑pdf,并且导出pdf的工具。

 

pdfmake:http://pdfmake.org

  优点: 能够支持中文,具有部分自适应布局功能,需要vfs_fonts.js 字体文件。

  缺点:支持中文的vfs_fonts.js文件一般较大。 如果图片过大,不会自动分页。

  生成vfs_fonts.js 文件的方法如图,npm install pdfmake, 添加examples/fonts文件夹,再在里面放入需要的.ttf文件。再 gulp buildFonts 生产文件,文件在存放在build中。一般js文件会比.ttf文件大一倍,目前发现黑体比较小,1.5M左右。

技术分享图片

 

第二种 jspdf

  优点:图片按照background-position 来定位到pdf中。

  缺点:不支持中文,布局比较死板。

纯前端导出pdf文件,不仅需要分页,也需要pdf清晰。这两个难题都是有技巧可以解决的。目前我使用的方法是 使用html2canvas将html转换为图片,再用jspdf将图片一张一张贴到pdf中。

分页:不管jspdf还是pdfmake都需要使用高度较小的图片,图片高度越小,分页效果就越好。所以一个table尽量一个tr就是一张图。如此分页时后只要判断下一张图片贴上去后是否会超过pdf内容区(你可以设置页眉页脚,左右边距高度)高度,超过了就换页。

pdf清晰度:如果利用了echart之类,一定要用它给的api获取dataURL,设置分辨率倍数多一点,导出的图片非常清晰,这样生产的pdf才会清晰。如果是普通元素,如果发现导出的图片不够清晰,可以专门写一个用于导出的页面。此页面所有内容都放大2 倍,然后设置left:-9999隐藏(不可display:none)。当html2canvas转换此页面的为图片的时候,图片会非常大,然后使用pdf编辑工具让图片等比缩放,会很清晰。html2canvas option里也有个scale参数,也可以调,但太大会报错。

 

纯前端导出pdf文件

原文:https://www.cnblogs.com/gsgs/p/8232854.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!