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

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

时间: 2024-10-20 08:00:12

纯前端导出pdf文件的相关文章

利用iText导出pdf文件

一.导出pdf工具类:  package pdf; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import j

Java导出pdf文件数据

提示:导出pdf文件,需要3个jar包iText-2.1.5.jar,iTextAsian.jar,iText-rtf-2.1.4.jar. public boolean outputPdfJhsy(EntityBean data) { try { Global.getInstance().LogApp("导出pdf开始"); String pdfpath = File.get("LEAP/NSESTModule/WRModule/nsjhsyzm.pdf").ge

Mac下使用JupyterNotebook导出pdf文件

通过Latex输出中文PDF 安装latex可以选择完整安装,和安装latex-base版本.完整安装仅安装包就有约2.7G,latex-base是一个基础包,安装包100M左右,安装需要400M不到的空间.我们目前仅需要通过latex输出PDF文档,所以不需要安装完整安装.使用latex-base就可以了.但是latex-base安装后,不能直接使用,还需要一些额外操作才能正常支持中文格式. Latex在 Mac OS中 叫MacTex. 安装BasicTex 从官网下载BaisicTex安装

ReportViewer 不预览,直接导出 PDF文件

作为笔记记着,以免以后再到处找资料 1. 在不预览的情况下导出文件 先看一个方法说明,想知道ReportViewer支持导出哪些文件类型,在Render方法说明中就有描述 // // Summary: // Processes the report and renders it in the specified format using a stream // provided by a callback function. // // Parameters: // format: // The

web前端导出csv文件

前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这个需求肯定是有答案的,只是对于各浏览器处理会稍微不一样.(主要是IE 和其他浏览器的区别). 在IE中使用ActiveXObject 实现,在firefox 和Chrome 中使用  a 标签(或者js)就可以实现了. 这里主要讲一下其他浏览器中的实现. 使用 a 标签实现方式 直接上例子: [ht

结合模板导出PDF文件

@Action("report_exportJasperPdf")    public String exportJasperPdf() throws Exception{        //查询出满足当前条件 结果数据        List<WayBill> wayBills = wayBillService.findWayBills(model);        //下载导出        //设置头信息        ServletActionContext.get

前端导出excel文件

https://blog.csdn.net/oscar999/article/details/16342699 https://blog.csdn.net/aa122273328/article/details/50388673 todo ---------------- 版权声明:本文为CSDN博主「hhzzcc_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/hhzzcc_/article/det

HTML导出PDF中文文件

今天在做一个账单导出,需要导出PDF文件.于是开始满天下找解决方案.其实说实话,PDF确实了解比较少,看到园子里面很多人都说用  iTextSharp. 于是乎专门对iTextSharp是什么进行了搜索,原来这个国外的一群人开发的PDF的类库.于是根据下载了iTextSharp.DLL并引用了它,结果发现结果太不理想了.没有样式没有中文,这让人....甚至,跨行的RowSpan也给我弄掉了.这完全不是我需要的东西嘛.想放弃了,换个东西来做.然后随手点了iTextSharp的开源项目.结果发现

如何在CAD编辑器中导出PDF格式的文件?

如何在CAD编辑器中导出PDF格式的文件?在日常的工作中,像设计师和一些建造师们经常会使用到CAD软件来制图,那么如何在CAD导出PDF文件便成了我们工作中必不可少的一部分,那如何在CAD编辑器中导出PDF格式的文件呢?具体要怎么操作?今天就来教大家如何在迅捷CAD编辑器中导出PDF格式的文件的具体操作步骤.小伙伴们可要好好的看哈,看完你会有不一样的收获的. 步骤一:首先小伙伴们在电脑桌面上任意的打开一个浏览器,在浏览器的搜索框中搜索迅捷CAD编辑器,进入官网点击下载并安装最新版本的CAD编辑器