页面直接导出为PDF文件,支持分页与页边距-创新互联

将WEB页面直接导出为pdf文件是经常会用到的一个功能,尤其是各种报表系统。总结了一下目前几种主流的做法:

成都创新互联公司是一家专业提供资源企业网站建设,专注与成都网站制作、成都网站设计、外贸营销网站建设html5、小程序制作等业务。10年已为资源众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
  1. 在后端用代码生成pdf文件,比如iText一类;

  2. 在后端抓取页面并生成pdf文件,比如phantomjs一类;

  3. 在前端用js直接生成pdf文件;


方案3的优势在于前端直接生成,所见即所得。今天要探索的就是html2canvas和jspdf,前者用于将页面元素render生成canvas,后者用于将canvas生成pdf文档。需要注意的是,这种方法对IE系列支持不好。

html2canvas的主页:http://html2canvas.hertzen.com/

jspdf的主页:https://parall.ax/products/jspdf

两者的使用都比较简单,网上的文章很多,但是对于长网页导出,jspdf是不支持分页的,目前有一种做法是addImage时控制起始纵坐标为负值,然后超出页面底边的自动隐藏,就达到显示上的分页效果了,但这种方法无法给pdf页面留页边距,因此本文主要针对分页与页边距进行探索。


基本思路是对得到的canvas进行切割,按A4纸大小并留边距后的比例进行剪裁,切出一页一页的内容来,再分别加到pdf中。上个DEMO:




    
    测试PDF导出
    
    
    
    
    
    


    导出pdf
    

核心的是exportPdf这个方法 ,感兴趣的同学可以参考。生成的pdf效果如图,可以看到分页和页边距效果:

页面直接导出为PDF文件,支持分页与页边距

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享名称:页面直接导出为PDF文件,支持分页与页边距-创新互联
网页路径:http://csdahua.cn/article/cciogi.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流