整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本文中，我將展示如何使用 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小時內與您取得聯系。
