整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
本文中，我将展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。
背景：几个月前，一个客户要求我们开发一个功能，用户可以得到 PDF 格式的 React 页面内容。该页面基本上是患者病例的报告和数据可视化结果，其中包含许多 SVG。另外还有一些特殊的请求来操纵布局，并对 HTML 元素进行一些重新排列。因此与原始的 React 页面相比，PDF 中应该有不同的样式和额外的内容。
由于这个任务比用简单的 CSS 规则解决要复杂得多，所以我们先探讨了可能的实现方法。我们找到了 3 个主要解决方案。这篇博文将指导你了解它们的可能性并最终实施。
目录：
在客户端还是服务器端生成？
在客户端和服务器端都可以生成PDF文件。但是让后端处理它可能更有意义，因为你并不想耗尽用户浏览器可以提供的所有资源。
即便如此，我仍然会展示这两种方法的解决方案。
方案1：从 DOM 制作屏幕截图
乍一看，这个解决方案似乎是最简单的，事实证明的确是这样，但它有其自身的局限性。如果你没有特殊需求，例如在 PDF 中选择文本或对文本进行搜索，那么这就是一种简单易用的方法。
此方法简单明了：从页面创建屏幕截图，并把它放到 PDF 文件中。非常直截了当。我们可以使用两个包来实现：
开始编码：
npm install html2canvas jspdf
就这样！
请注意 html2canvas 的 onclone方法。当你在截图之前需要操纵 DOM（例如隐藏打印按钮）时，它是非常方便的。我看到过很多使用这个包的项目。但不幸的是，这不是我们想要的，因为我们需要在后端完成对 PDF 的创建工作。
方案2：只使用 PDF 库
NPM上有几个库，如 jsPDF（如上所述）或PDFKit。他们的问题是，如果我想使用这些库，我将不得不重新调整页面结构。这肯定会损害可维护性，因为我需要将所有后续更改应用到 PDF 模板和 React 页面中。
请看下面的代码。你需要亲自手动创建 PDF 文档。你需要遍历 DOM 并找出每个元素并将其转换为 PDF 格式，这是一项繁琐的工作。必须找到一个更简单的方法。
这段代码段来自 PDFKit 文档。但是如果你的目标是直接生成一个 PDF 文件，而不是对一个已经存在的（并且不断变化的）HTML 页面进行转换，它还是很有用的。
最终方案3：基于 Node.js 的 Puppeteer 和 Headless Chrome
什么是 Puppeteer？其文档中写道：
Puppeteer 是一个 Node 库，它提供了一个高级 API 来控制 DevTools 协议上的 Chrome 或 Chromium。 Puppeteer 默认以 headless 模式运行 Chrome 或 Chromium，但其也可以被配置为完整的（non-headless）模式运行。
它本质上是一个可以从 Node.js 运行的浏览器。如果你读过它的文档，其中首先提到的就是你可以用 Puppeteer 来生成页面的截图和PDF。优秀！这正是我们想要的。
先用 npmi i puppeteer 安装 Puppeteer，并实现我们的功能。
这是一个简单的功能，可导航到 URL 并生成站点的 PD F文件。
首先，我们启动浏览器（仅在 headless 模式下支持 PDF 生成），然后打开新页面，设置视口，并导航到提供的URL。
设置 waitUntil:'networkidle0' 选项意味着当至少500毫秒没有网络连接时，Puppeteer 会认为导航已完成。 （可以从 API docs 获取更多信息。）
之后，我们将 PDF 保存为变量，关闭浏览器并返回 PDF。
注意：page.pdf 方法接收 options 对象，你可以使用 'path' 选项将文件保存到磁盘。如果未提供路径，则 PDF 将不会被保存到磁盘，而是会得到缓冲区。（稍后我将讨论如何处理它。）
如果需要先登录才能从受保护的页面生成 PDF，首先你要导航到登录页面，检查表单元素的 ID 或名称，填写它们，然后提交表单：
要始终将登录凭据保存在环境变量中，不要硬编码！
样式控制
Puppeteer 也有这种样式操作的解决方案。你可以在生成 PDF 之前插入样式标记，Puppeteer 将生成具有已修改样式的文件。
await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })
将文件发送到客户端并保存
好的，现在你已经在后端生成了一个 PDF 文件。接下来做什么？
如上所述，如果你不把文件保存到磁盘，将会得到一个缓冲区。你只需要把含有适当内容类型的缓冲区发送到前端即可。
现在，你只需在浏览器向服务器发送请求即可得到生成的 PDF。
一旦发送了请求，缓冲区的内容就应该开始下载了。最后一步是将缓冲区数据转换为 PDF 文件。
就这样！如果单击“保存”按钮，那么浏览器将会保存 PDF。
在 Docker 中使用 Puppeteer
我认为这是实施中最棘手的部分 —— 所以让我帮你节省几个小时的百度时间。
官方文档指出*“在 Docker 中使用 headless Chrome 并使其运行起来可能会非常棘手”*。官方文档有疑难解答部分，你可以找到有关用 Docker 安装 puppeteer 的所有必要信息。
如果你在 Alpine 镜像上安装 Puppeteer，请确保在看到页面的这一部分时再向下滚动一点。否则你可能会忽略一个事实：你无法运行最新的 Puppeteer 版本，并且你还需要用一个标记禁用 shm ：
const browser = await puppeteer.launch({
headless: true,
args: ['--disable-dev-shm-usage']
});
否则，Puppeteer 子进程可能会在正常启动之前耗尽内存。
方案 3 + 1：CSS 打印规则
可能有人认为从开发人员的角度来看，简单地使用 CSS 打印规则很容易。没有 NPM 模块，只有纯 CSS。但是在跨浏览器兼容性方面，它的表现如何呢？
在选择 CSS 打印规则时，你必须在每个浏览器中测试结果，以确保它提供的布局是相同的，并且它不是100％能做到这一点。
例如，在给定元素后面插入一个 break-after 并不是一个多么高深的技术，但是你可能会惊讶的发现要在 Firefox 中使用它需要使用变通方法。
除非你是一位经验丰富的 CSS 大师，在创建可打印页面方面有很多的经验，否则这可能会非常耗时。
如果你可以使打印样式表保持简单，打印规则是很好用的。
让我们来看一个例子吧。
@media print {
.print-button {
display: none;
}
.content div {
break-after: always;
}
}
上面的 CSS 隐藏了打印按钮，并在每个 div 之后插入一个分页符，其中包含content 类。有一篇很棒的文章总结了你可以用打印规则做什么，以及它们有什么问题，包括浏览器兼容性。
考虑到所有因素，如果你想从不那么复杂的页面生成 PDF，CSS打印规则非常有效。
总结
让我们快速回顾前面介绍的方案，以便从 HTML 页面生成 PDF 文件：
虽然今天是愚人节，但是以上所有内容都是在真的！
作者：疯狂的技术宅
链接：https://juejin.im/post/5ca1dc0251882543d569e075
喽，今天是一篇HTML to PDF速食指南。
Java 转换 HTML 到PDF有许多类库，今天我们介绍一下第三方免费的类库OpenPDF。
OpenPDF是免费的Java类库 ，遵从LGPL 和 MPL协议，所以基本上能够可以随意使用。OpenPDF是基于iTEXT的，目前来说也是维护的比较好的Java操作PDF的开源软件。
话不多说，且看所需要的依赖，
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.13.1</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-core</artifactId>
<version>1.0.6</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-pdfbox</artifactId>
<version>1.0.6</version>
</dependency>
jsoup可以将html文件转换成输入流等，也可以遍历html的DOM节点，提取元素及样式等。
本篇示例将以下html文件转换成pdf
<html>
<head>
<style>
.center_div {
border: 1px solid #404e94;
margin-left: auto;
margin-right: auto;
background-color: #f6d0ed;
text-align: left;
padding: 8px;
}
table {
width: 100%;
border: 1px solid black;
}
th, td {
border: 1px solid black;
}
body,html,input{font-family:"msyh";}
</style>
</head>
<body>
<div class="center_div">
<h1>Hello java North!</h1>
<div>
<p>convert html to pdf.</p>
</div>
<div>
<table>
<thead>
<th>ROLE</th>
<th>NAME</th>
<th>TITLE</th>
</thead>
<tbody>
<tr>
<td>MARKSMAN</td>
<td>ASHE</td>
<td>THE FROST ARCHER</td>
</tr>
<tr>
<td>MAGES</td>
<td>ANNIE</td>
<td>THE DARK CHILD</td>
</tr>
<tr>
<td>射手</td>
<td>凯塔琳</td>
<td>皮城女警</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
以上html用浏览器打开如下，乱码是因为中文字体不识别，下面转换的时候会加载对应的字体来进行转换。
使用Java转换HTML到PDF代码如下：
public class HtmlToPDFOpenSource {
public static void main(String[] args) throws IOException {
HtmlToPDFOpenSource htmlToPDFOpenSource = new HtmlToPDFOpenSource();
htmlToPDFOpenSource.generatePdfByOpenhtmltopdf();
}
private void generatePdfByOpenhtmltopdf() throws IOException {
File inputHtml = new File("E:\\javaNorth\\java-study-note\\javaOpenSource\\src\\main\\resources\\test.html");
//加载html文件
Document document = Jsoup.parse(inputHtml, "UTF-8");
document.outputSettings().syntax(Document.OutputSettings.Syntax.html);
//引入资源目录，可以单独引入css，图片文件等
String baseUri = FileSystems.getDefault()
.getPath("javaOpenSource\\src\\main\\resources")
.toUri().toString();
try (OutputStream os = new FileOutputStream("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf")) {
PdfRendererBuilder builder = new PdfRendererBuilder();
builder.withUri("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf");
builder.toStream(os);
builder.withW3cDocument(new W3CDom().fromJsoup(document), baseUri);
//引入指定字体，注意字体名需要和css样式中指定的字体名相同
builder.useFont(new File("javaOpenSource\\src\\main\\resources\\fonts\\msyh.ttf"),"msyh",1,BaseRendererBuilder.FontStyle.NORMAL, true);
builder.run();
}
}
}
使用Java代码转换成PDF如下（示例中使用了微软雅黑中文字体）：
上述html文件中增加如下外部样式：
<link href="style.css" rel="stylesheet">
并在resources目录下添加style.css文件，重新生成PDF文件如下。
本片介绍了使用OpenPDF将html文件转换成PDF文件。同时也使用了自定义字体，外部样式。但是以下几点需要格外注意。
全部示例在此：https://github.com/javatechnorth/java-study-note/tree/master/javaOpenSource/src/main/java/pdf
文章来源：Java技术指北
近临近开学了，大家都在忙着准备各种学习的资料，准备在新的学期好好学习，充实自己。小编身边的同学也是如此，最近，小编的同学小丽就遇到了一个很棘手的问题。
她想将一个网页的Python学习的教程打印下来，方便自己来学习，但是上千页的教程，如果通过手动的方式，一个一个的去转成pdf并保存到本地，实在是麻烦的不。
这就是一个html转pdf的问题，其实网上有很多不错的html资源，但是苦于学习起来，不方便！于是小编就跟小丽保证，这点小事包在我身上。今天，小编就跟分享一下如何用Python把html资料变成pdf。
如今网上的在线学习资料可谓是多如牛毛，为了方便讲解，小编就利用python3.9.2的中文文档作为演示的例子，来将其抓取并保存到本地，其网页链接如下：
https://docs.python.org/zh-cn/3.9/tutorial/index.html
打开上述链接后，大家会在网页中找到不同内容的链接地址，包括了基础的python字符、python语法等内容。
在上图中，我们需要格外关注的是红色方格标注的链接，每个链接都会跳转到对应的子网页中，而在子网页中，就是我们想要保存的内容。
可以看到，上图中，在python速览子页面中，包含了我们需要提取的文字内容。所以将html内容保存为pdf的第一步便是获取到子页面的链接。由于教程大都是固定内容，因此对于教程的网页，大都采用的是静态页面，在网页源代码中可以很轻松地找到子页面的网页链接。
对于子网页的链接抓取，程序如下图所示:
程序中，通过BeautifulSoup库来解析网页源代码，然后提取所有的子页面链接地址并返回，如果抓取失败，则直接返回None。
03.html转pdf
在得到子网页的链接后，接下来就是将html的子网页保存为pdf文件。小编使用的pdfkit库，pdfkit库可以将网页保存为pdf文档。首先小编来介绍一下pdfkit库的安装。
按照上述的操作流程，就可以安装pdfkit库。对于pdfkit库的使用，常见的用法有以下三种：
上面的程序主要完成以下几步：
首先需要指定wkhtmltopdf.exe文件的路径；
因此，pdfkit库只能将子网页保存为单独的pdf文档，无法直接通过pdfkit库将所有的子网页拼接成一个完整的pdf文档，小编通过PyPDF2库中的PdfFileMerger类来实现pdf文档的拼接。程序如下图所示。
程序中首先将所有的html网页保存为单独的pdf文档，然后通过PdfFileMerger类对象来实现pdf文档的拼接。最后就可以得到全部的pdf内容。最后我们通过视频的展示，来看一下程序的效果吧。
除此之外，程序不光可以抓取python3.9的中文文档，针对其他的在线文档，只需要对获取网页链接的程序进行修改即可抓取，例如对于Flask中文文档的抓取，程序只需要按照下图进行修改，即可将Flask的在线文档保存为PDF文档。
学习Python其实非常有趣，也很有用。因为Python有大量的现成的库，可以帮助我们把工作中的很多琐碎的烦事轻松解决。小编将上述的程序稍加修改，很快就帮阿丽搞定了教程，保存为pdf发送给了她，小编与女神的关系更拉近了一步
*请认真填写需求信息，我们会在24小时内与您取得联系。
