html转为pdf的组件有很多,但是还没有哪一款能达到这个效果,其只要原因是wkhtmltopdf使用webkit网页渲染引擎开发的用来将 html转成 pdf的工具,可以跟多种脚本语言进行集成来转换文档。但是就使用简便性来说还是itext等组件占据优势,如果你要转换格式有比较高的要求,那么wkhtmltopdf绝对是不二之选!
下载路径
官网地址 wkhtmltopdf.org/
github地址 github.com/wkhtmltopdf…
使用方法
java调用demo
public class HtmlToPdfInterceptor extends Thread { private InputStream is; public HtmlToPdfInterceptor(InputStream is){ this.is = is; } public void run(){ try{ InputStreamReader isr = new InputStreamReader(is, "utf-8"); BufferedReader br = new BufferedReader(isr); String line = null; while ((line = br.readLine()) != null) { System.out.println(line.toString()); //输出内容 } }catch (IOException e){ e.printStackTrace(); } }}public class HtmlToPdf { //wkhtmltopdf在系统中的路径 private static final String toPdfTool = "D:\wkhtmltopdf\bin\wkhtmltopdf.exe"; /** * html转pdf * @param srcPath html路径,可以是硬盘上的路径,也可以是网络路径 * @param destPath pdf保存路径 * @return 转换成功返回true */ public static boolean convert(String srcPath, String destPath){ File file = new File(destPath); File parent = file.getParentFile(); //如果pdf保存路径不存在,则创建路径 if(!parent.exists()){ parent.mkdirs(); } StringBuilder cmd = new StringBuilder(); cmd.append(toPdfTool); cmd.append(" "); cmd.append(" --header-line");//页眉下面的线 cmd.append(" --header-center 这里是页眉这里是页眉这里是页眉这里是页眉 ");//页眉中间内容 //cmd.append(" --margin-top 30mm ");//设置页面上边距 (default 10mm) cmd.append(" --header-spacing 10 ");//(设置页眉和内容的距离,默认0) cmd.append(srcPath); cmd.append(" "); cmd.append(destPath); boolean result = true; try{ Process proc = Runtime.getRuntime().exec(cmd.toString()); HtmlToPdfInterceptor error = new HtmlToPdfInterceptor(proc.getErrorStream()); HtmlToPdfInterceptor output = new HtmlToPdfInterceptor(proc.getInputStream()); error.start(); output.start(); proc.waitFor(); }catch(Exception e){ result = false; e.printStackTrace(); } return result; } public static void main(String[] args) { HtmlToPdf.convert("https://my.oschina.net/papio/blog/835645", "d:/wkhtmltopdf.pdf"); }}复制代码
wkhtmltopdf 参数详解
wkhtmltopdf [OPTIONS]... <input file> [More input files] <output file>常规选项 --allow <path> 允许加载从指定的文件夹中的文件或文件(可重复) --book* 设置一会打印一本书的时候,通常设置的选项 --collate 打印多份副本时整理 --cookie <name> <value> 设置一个额外的cookie(可重复) --cookie-jar <path> 读取和写入的Cookie,并在提供的cookie jar文件 --copies <number> 复印打印成pdf文件数(默认为1) --cover* <url> 使用HTML文件作为封面。它会带页眉和页脚的TOC之前插入 --custom-header <name> <value> 设置一个附加的HTTP头(可重复) --debug-javascript 显示的javascript调试输出 --default-header* 添加一个缺省的头部,与页面的左边的名称,页面数到右边,例如: --header-left '[webpage]' --header-right '[page]/[toPage]' --header-line --disable-external-links* 禁止生成链接到远程网页 --disable-internal-links* 禁止使用本地链接 --disable-javascript 禁止让网页执行JavaScript --disable-pdf-compression* 禁止在PDF对象使用无损压缩 --disable-smart-shrinking* 禁止使用WebKit的智能战略收缩,使像素/ DPI比没有不变 --disallow-local-file-access 禁止允许转换的本地文件读取其他本地文件,除非explecitily允许用 --allow --dpi <dpi> 显式更改DPI(这对基于X11的系统没有任何影响) --enable-plugins 启用已安装的插件(如Flash --encoding <encoding> 设置默认的文字编码 --extended-help 显示更广泛的帮助,详细介绍了不常见的命令开关 --forms* 打开HTML表单字段转换为PDF表单域 --grayscale PDF格式将在灰阶产生 --help Display help --htmldoc 输出程序HTML帮助 --ignore-load-errors 忽略claimes加载过程中已经遇到了一个错误页面 --lowquality 产生低品质的PDF/ PS。有用缩小结果文档的空间 --manpage 输出程序手册页 --margin-bottom <unitreal> 设置页面下边距 (default 10mm) --margin-left <unitreal> 将左边页边距 (default 10mm) --margin-right <unitreal> 设置页面右边距 (default 10mm) --margin-top <unitreal> 设置页面上边距 (default 10mm) --minimum-font-size <int> 最小字体大小 (default 5) --no-background 不打印背景 --orientation <orientation> 设置方向为横向或纵向 --page-height <unitreal> 页面高度 (default unit millimeter) --page-offset* <offset> 设置起始页码 (default 1) --page-size <size> 设置纸张大小: A4, Letter, etc. --page-width <unitreal> 页面宽度 (default unit millimeter) --password <password> HTTP验证密码 --post <name> <value> Add an additional post field (repeatable) --post-file <name> <path> Post an aditional file (repeatable) --print-media-type* 使用的打印介质类型,而不是屏幕 --proxy <proxy> 使用代理 --quiet Be less verbose --read-args-from-stdin 读取标准输入的命令行参数 --readme 输出程序自述 --redirect-delay <msec> 等待几毫秒为JS-重定向(default 200) --replace* <name> <value> 替换名称,值的页眉和页脚(可重复) --stop-slow-scripts 停止运行缓慢的JavaScripts --title <text> 生成的PDF文件的标题(第一个文档的标题使用,如果没有指定) --toc* 插入的内容的表中的文件的开头 --use-xserver* 使用X服务器(一些插件和其他的东西没有X11可能无法正常工作) --user-style-sheet <url> 指定用户的样式表,加载在每一页中 --username <username> HTTP认证的用户名 --version 输出版本信息退出 --zoom <float> 使用这个缩放因子 (default 1) 页眉和页脚选项--header-center* <text> (设置在中心位置的页眉内容) --header-font-name* <name> (default Arial) (设置页眉的字体名称)--header-font-size* <size> (设置页眉的字体大小)--header-html* <url> (添加一个HTML页眉,后面是网址)--header-left* <text> (左对齐的页眉文本)--header-line* (显示一条线在页眉下)--header-right* <text> (右对齐页眉文本)--header-spacing* <real> (设置页眉和内容的距离,默认0)--footer-center* <text> (设置在中心位置的页脚内容) --footer-font-name* <name> (设置页脚的字体名称) --footer-font-size* <size> (设置页脚的字体大小default 11)--footer-html* <url> (添加一个HTML页脚,后面是网址)--footer-left* <text> (左对齐的页脚文本)--footer-line* 显示一条线在页脚内容上)--footer-right* <text> (右对齐页脚文本)--footer-spacing* <real> (设置页脚和内容的距离)./wkhtmltopdf --footer-right '[page]/[topage]' http://www.baidu.com baidu.pdf./wkhtmltopdf --header-center '报表' --header-line --margin-top 2cm --header-line http://192.168.212.139/oma/ oma.pdf表内容选项中 --toc-depth* <level> Set the depth of the toc (default 3) --toc-disable-back-links* Do not link from section header to toc --toc-disable-links* Do not link from toc to sections --toc-font-name* <name> Set the font used for the toc (default Arial) --toc-header-font-name* <name> The font of the toc header (if unset use --toc-font-name) --toc-header-font-size* <size> The font size of the toc header (default 15) --toc-header-text* <text> The header text of the toc (default Table Of Contents) --toc-l1-font-size* <size> Set the font size on level 1 of the toc (default 12) --toc-l1-indentation* <num> Set indentation on level 1 of the toc (default 0) --toc-l2-font-size* <size> Set the font size on level 2 of the toc (default 10) --toc-l2-indentation* <num> Set indentation on level 2 of the toc (default 20) --toc-l3-font-size* <size> Set the font size on level 3 of the toc (default 8) --toc-l3-indentation* <num> Set indentation on level 3 of the toc (default 40) --toc-l4-font-size* <size> Set the font size on level 4 of the toc (default 6) --toc-l4-indentation* <num> Set indentation on level 4 of the toc (default 60) --toc-l5-font-size* <size> Set the font size on level 5 of the toc (default 4) --toc-l5-indentation* <num> Set indentation on level 5 of the toc (default 80) --toc-l6-font-size* <size> Set the font size on level 6 of the toc (default 2) --toc-l6-indentation* <num> Set indentation on level 6 of the toc (default 100) --toc-l7-font-size* <size> Set the font size on level 7 of the toc (default 0) --toc-l7-indentation* <num> Set indentation on level 7 of the toc (default 120) --toc-no-dots* Do not use dots, in the toc轮廓选项 --dump-outline <file> 转储目录到一个文件 --outline 显示目录(文章中h1,h2来定) --outline-depth <level> 设置目录的深度(默认为4)页脚和页眉 * [page] 由当前正在打印的页的数目代替 * [frompage] 由要打印的第一页的数量取代 * [topage] 由最后一页要打印的数量取代 * [webpage] 通过正在打印的页面的URL替换 * [section] 由当前节的名称替换 * [subsection] 由当前小节的名称替换 * [date] 由当前日期系统的本地格式取代 * [time] 由当前时间,系统的本地格式取代
作者:曹元
链接:https://juejin.im/post/6856547881873047559
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
tml2pdf
PDFBox是一个Java库,可用于创建,修改和提取PDF文件的内容。它是一个Apache软件基金会的项目,使用Apache License 2.0许可证。
PDFBox提供了一组API,可用于提取文本和图像,添加和删除页面,提取PDF元数据和加密PDF文件等。
<!-- 将 html 转换为 xml 工具库 -->
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.17.1</version>
</dependency>
<!-- 第三方 pdfbox 包装库,提供 html 转 pdf 功能 -->
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-pdfbox</artifactId>
<version>1.0.10</version>
</dependency>
// 获取 java 版本
String version = System.getProperty("java.specification.version");
// 获取系统类型
String platform = System.getProperty("os.name", "");
platform = platform.toLowerCase().contains("window") ? "win" : "linux";
// 当前程序目录
String current = System.getProperty("user.dir");
System.out.println(String.format("current=%s", current));
// html 文件路径
File index = Paths.get(current, "..", "index.html").toFile();
if (!index.exists()) {
System.out.println(String.format("file not exist,file=%s", index.getAbsolutePath()));
return;
}
try {
Document doc = Jsoup.parse(index, "UTF-8");
// 补全标记
doc.outputSettings().syntax(Document.OutputSettings.Syntax.xml);
File file = Paths.get(current, String.format("java%s_%s.pdf", version, platform)).toFile();
FileOutputStream stream = new FileOutputStream(file);
PdfRendererBuilder builder = new PdfRendererBuilder();
// NOTE 字体问题,文档中出现过的字段,需要手动加载字体
builder.useFont(Paths.get(current, "..", "fonts", "simsun.ttc").toFile(), "SimSun");
builder.useFont(Paths.get(current, "..", "fonts", "msyh.ttc").toFile(), "font-test");
builder.useFont(Paths.get(current, "..", "fonts", "msyh.ttc").toFile(), "Microsoft YaHei UI");
// NOTE 设置根目录
String baseUrl = Paths.get(current, "..").toUri().toString();
builder.withHtmlContent(doc.html(), baseUrl);
builder.toStream(stream);
builder.run();
} catch (IOException e) {
throw new RuntimeException(e);
}
pdfbox-demo/java1.8_win.pdf · yjihrp/linux-html2pdf-demo - Gitee.com
pdfbox-demo/java11_linux.pdf · yjihrp/linux-html2pdf-demo - Gitee.com
# 查看 pdf 内部结构
java -jar pdfbox-app debug path-to-pdf/test.pdf
java -jar debugger-app path-to-pdf/test.pdf
测试结果
下一篇 5-LINUX HTML 转 PDF-selenium
言
目前,教学、教研各种内容线上沉淀、展示丰富多彩,但线上内容“线下化”能力不足或过分依赖人力,比如,线上练习题组卷后以PDF形式分发给学生,家长希望将考试、练习题目打印后,学生带到学校去做(高中生使用手机等电子设备的时间有限),线上各类分析报告以PDF形式分享给学生/家长等。
从业务方面看,不同业务线的多个业务场景都有输出PDF的诉求,如果各业务线自己设计、实现符合自身业务场景的具体方案,除调研、开发工作量较大之外,还会有重复调研,踩坑的情况。
从技术角度看,线上内容转PDF的内容源头来自于H5富文本内容,业界内以此为基础的PDF生成方案多种多样,也各有优劣,比如:
方案对比-表格-1
因此,我们综合了各种PDF生成方案并总结了在探索讲义生成PDF过程中的经验,抽象出了一套通用的,可复用的能力供各业务线快速利用,基本方案和优劣如下:
最终方案-表格-2
目 标
旨在提供一套以H5为载体的PDF通用生成方案,这套方案有如下特点:
这套方案可分为两个核心部分,页面展示侧 - Medusa,PDF生成侧 - Hydra
页面展示侧 - Medusa
我们页面展示侧的通用能力——Medusa,是基于Paged.js的二次封装,并以NPM包形式提供给业务方使用。Medusa可对任何HTML进行分页、并根据配置添加页眉、页脚等,最终将处理后的HTML渲染到页面中。Medusa封装并简化了对PDF格式的配置,可覆盖绝大多数业务场景,使得各业务场景将更多精力投入其自身业务逻辑的开发。
之所以选择Pagedjs为基础开发我们自己的SDK,是因为它是目前我们能找到的唯一开源的、具有HTML内容分页,样式处理的前端库,同时我们也在讲义中经过了长期的摸索与沉淀。
接下来将详细介绍Paged.js原理、Medusa支持的功能与使用方法。
一 Paged.js是如何工作的
Paged.js包含了 3 个大模块
这里将主要介绍 Previewer 和 Chunker,因为我们的二次开发和维护不涉及到Polisher。
Previewer
Previewer 的工作非常简单,但我们会主要利用它封装我们的Medusa,初始化一个Previewer对象,Previewer初始化了Chunker和Polisher对象:
Medusa-代码-1
再调用Previewer的preview()方法,preview()方法做了两件事:
Medusa-代码-2
当chunker.flow结束,即可在浏览器看到整个页面处理完之后的样子。
Chunker
首先,Chunker解析、预处理需要分页的HTML,为其添加一些必要的属性
Medusa-代码-3
然后创建容纳所有页(pages)的容器,并挂载到renderTo容器下(默认Body),以备组织后续的所有页:
Medusa-代码-4
接着,chunker创建了一个page模版,以便增加页面使用:
Medusa-代码-5
其中,TEMPLATE是Pagedjs内部创建页面时所使用的基础模版。
Medusa-代码-6
接下来,chunker进入了渲染+分页过程(这个过程我们不会在二次开发中做修改,但需要了解其基本思路以便在出问题时能有解决思路),这个过程在循环一个迭代器(*layout),迭代器一直在做3件事:
原则:
寻找overflow时会将尽可能多的内容节点插入内容区域,这里,“尽可能多”分为几种情况,比如:
步骤:
Pagedjs遵循了如下步骤去寻找overflow:
两个前置条件:
i. 从需要处理的内容第一个节点开始,判断是否 node.left >= contentArea.right || node.top >= contentArea.bottom
Medusa-代码-7
ii.如果不满足,则判断 node.right <= contentArea.right && node.bottom <= contentArea.bottom
Medusa-代码-8
iii.如果不满足,那说明有子节点overflow了,则继续深入其子节点查找即可。
3.使用模版添加新的页面,并从BreakToken处继续上述动作。
二 Medusa支持的功能及使用方法
基于Paged.js,Medusa支持了如下功能,并为业务方提供了更加简洁、定制化的配置。
下方是调用Medusa的代码示例:
Medusa-代码-9
1.1 动态页面分页能力
Medusa核心功能,可将连续的HTML页面转化成一页页PDF样式的HTML。
1.2 单页模版配置 -> 生成能力
通过Grid布局,Paged.js将一个单页模版分为多个区域,整体分为2个大的部分:
业务方通过简单的配置,即可还原UI设计稿中的PDF样式,例子如下图:
1.2.1 base
页面基础配置是对每页的。支持纸型或页面宽高、内容区域margin、padding、背景及水印的设置。
在封装Medusa时,Medusa将读取传入的页面模版配置、静态页内容配置,并将样式上的配置解析并转化为Previewer可理解的样式内容,比如页面宽高的设置:
Medusa-代码-10
将被转化为:
Medusa-代码-11
1.2.2 surround
2. 目前支持3种类型的surround item:
example:
Medusa-代码-12
1.3 前/后置静态页面
业务方可通过如下方式配置静态页面的具体内容:
Medusa-代码-13
其中,传入的React JSX Element将会被这样处理:
Medusa-代码-14
处理完成后,将HTML String拼接到页面模版中,再插入分页后内容的前后。
PDF生成侧 - Hydra:
页面展示侧为PDF生成做好了页面的准备,对于PDF生成侧,需要做的工作就更纯粹了,业务方除了请求生成PDF,定期检查PDF生成的进度,无需做任何额外工作。
1.整体流程:
PDF生成是CPU和内存密集型的,由于页面内容的不确定性,也意味着页面渲染时间与生成PDF的时间都是不确定的,因此整体PDF生成的链路被设计成是异步的,如下图:
整体流程上,业务方在请求生成PDF时,会先在后端做一条记录,后端再将任务发送给Node服务,即Hydra;
在生成PDF时, 第 1 步是做页面上的准备,一个生成任务可能有多个URL页面需要生成PDF,所以我们预先启动对应URL数量的PPTR Page,页面都启动完成后,进入下一步;
第 2 步:渲染页面,这个过程中,如果请求是包含多个URL的,这些页面会同步渲染,在所有页面渲染完成后,进入下一步。
第 2.5 步,如果是需要生成连续页码的一整个PDF,还会做额外的一个动作:页码矫正,通过页码矫正,可以将同步渲染的每个页面,按照其之前页面的页码数修正,以保证整体PDF的页码的连贯。
第 3 步,通过PPTR Page的能力将页面转换为PDF buffer,如有必要,再将生成的PDF buffer拼接到一起生成一整个PDF,或者将每个PDF buffer都生成一个PDF,压缩成zip文件。
第 4 步,文件上传OSS,最终返回OSS CDN链接。
2.请求生成PDF:
业务侧请求将对应页面生成PDF的时,只需传入如下字段:
Hydra-代码-1
3.PDF生成过程:
正如在整体流程中所述,PDF生成侧,我们借助 PPTR 的能力打开页面并生成PDF流。
在页面调用 Medusa 分页、组装能力时,所有内容分页组装完成后会向body中插入了一个额外的DOM以标识该页面处理完成:
Hydra-代码-2
这是为了 Hydra 感知页面渲染完成所做的准备,当生成服务的 PPTR 等到该DOM出现时,则表示页面成功渲染并处理完成了:
Hydra-代码-3
此后,在上面已经提到过,对于需要将多个页面生成的PDF拼接成一个PDF的情况,在生成PDF之前需要做一个重要的动作,即页码矫正,原因如下:
并且我们不希望页面的处理是串行的,因为串行势必导致速度较慢,生成时间长。
这个问题的解决方案如下:
1. 对于每个页面都启用一个page,并同时处理
2. 每个页面处理完成后(pdfLastDOM出现),通过Page.$eval()来统计页数并记录:
Hydra-代码-4
3. 计算出页面中分页之后每一个页面的起始页码,以及所有页面的页码总和
4. 再修改页码容器样式的 counterReset 值即可,其后续页码可自递增。
Hydra-代码-5
5. 之后,再通过 Medusa 在页面window对象中Polyfill的相关配置,比如需要生成的PDF的单页宽、高以生成PDF流。
Hydra-代码-6
6. 最后如有必要,通过pdf-lib拼接这些 pdfBuffer 即可。
Hydra-代码-7
7. PDF生成完成后,上传OSS并返回URL链接
4.性能、稳定性保证:
在整体方案落地前,我们对服务进行了多次性能测试:
以下载题目为例,在4个容器,每个容器 3C 12G 的配置下的并行处理能力如下:
对于 20 道题目,每个PDF生成任务在 15 页左右,平均 1 分钟内能完成 280 个任务的处理。
对于 40 道题目,每个PDF生成任务在 30 页左右,平均 1 分钟内能完成 105 个任务的处理。
对于 60 到题目,每个PDF生成任务在 40 页左右,平均 1 分钟内能完成 54 个任务的处理。
同时,根据 Hydra 服务的整体的处理能力,后端通过任务队列的形式帮助我们保证服务不被瞬间的突刺流量击垮。
已接入/正在接入的相关业务线及场景:
目前,公司有 5 大业务线,8 个场景已经完全接入我们的能力用于 H5 转 PDF,如下是错题本、内容资料库接入后生成的PDF样例:
错题本:
内容资料库试卷:
未来展望
目前整体的PDF生成方案已经能够满足大多数场景和内容,但依然有可改进空间。
HTML的流式布局要求我们必须手动的对内容分页,才能添加页眉,页脚等(即Mdusa做的工作),正因为如此,在处理复杂的内容时,可能会出现一些问题:比如,遇到复杂表格时,由于表格可能会有多种多样的行、列合并,同时表格单元格内的内容也可以多种多样,在分页过程中,Medusa内部的PagedJS并不能完美的处理对于长、且复杂的表格的分割,因此可能遇到分割后表格单元格缺失、错乱或宽高错误的问题,这些问题在讲义中体现较明显。
我们仍在持续关注与研究复杂DOM内容的分割问题,会尝试加以优化和改进PagedJS的能力,同时,我们也以另外一种思路设计了自己的DOM分页器方案,但经过评估,由于实现比较复杂,成本较高,暂时没有投入开发资源。
不过,我们相信,未来我们一定能以更完美的方式分割DOM以生成更高质量的PDF。
作者:高源、陈欣博
来源:微信公众号:高途技术
出处:https://mp.weixin.qq.com/s/c_N7jdNklrNFKR_Cub2Tgg
*请认真填写需求信息,我们会在24小时内与您取得联系。