zoukankan      html  css  js  c++  java
  • 纯前端导出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参数,也可以调,但太大会报错。

  • 相关阅读:
    liferay常用api总结
    liferay增删改简单小练习
    MD5加密
    日期的工具类
    java生成随机六位数的验证码&随机生成十位数ValidCode码,用于邮件的验证&检查是不是符合为合法的中国的手机号码
    MyBaties
    网页的外观---CSS层叠样式表---03
    还在买鲜花送女神?手把手教你搭建3D立体相册网站,包女神稀饭
    Vue入门——常见指令及其详细代码示例
    什么是可串行化MVCC
  • 原文地址:https://www.cnblogs.com/gsgs/p/8232854.html
Copyright © 2011-2022 走看看