纯前端导出pdf文件


纯前端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参数,也可以调,但太大会报错。

优质内容筛选与推荐>>
1、Jquery Uploadify3.21.与2.1版本 使用中存在的问题--记录三
2、SharpDevelop研究 目录
3、利用图片按钮 和 input type="image" 为背景提交表单【转】
4、如果添加1条数据会等待10秒,你愿意等吗
5、python基本数据类型剖析


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号