本文中,我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式復(fù)雜的 React 頁面生成 PDF 文檔。
背景:幾個月前,一個客戶要求我們開發(fā)一個功能,用戶可以得到 PDF 格式的 React 頁面內(nèi)容。該頁面基本上是患者病例的報告和數(shù)據(jù)可視化結(jié)果,其中包含許多 SVG。另外還有一些特殊的請求來操縱布局,并對 HTML 元素進(jìn)行一些重新排列。因此與原始的 React 頁面相比,PDF 中應(yīng)該有不同的樣式和額外的內(nèi)容。
由于這個任務(wù)比用簡單的 CSS 規(guī)則解決要復(fù)雜得多,所以我們先探討了可能的實現(xiàn)方法。我們找到了 3 個主要解決方案。這篇博文將指導(dǎo)你了解它們的可能性并最終實施。
目錄:
在客戶端還是服務(wù)器端生成?
在客戶端和服務(wù)器端都可以生成PDF文件。但是讓后端處理它可能更有意義,因為你并不想耗盡用戶瀏覽器可以提供的所有資源。
即便如此,我仍然會展示這兩種方法的解決方案。
方案1:從 DOM 制作屏幕截圖
乍一看,這個解決方案似乎是最簡單的,事實證明的確是這樣,但它有其自身的局限性。如果你沒有特殊需求,例如在 PDF 中選擇文本或?qū)ξ谋具M(jìn)行搜索,那么這就是一種簡單易用的方法。
此方法簡單明了:從頁面創(chuàng)建屏幕截圖,并把它放到 PDF 文件中。非常直截了當(dāng)。我們可以使用兩個包來實現(xiàn):
開始編碼:
npm install html2canvas jspdf
就這樣!
請注意 html2canvas 的 onclone方法。當(dāng)你在截圖之前需要操縱 DOM(例如隱藏打印按鈕)時,它是非常方便的。我看到過很多使用這個包的項目。但不幸的是,這不是我們想要的,因為我們需要在后端完成對 PDF 的創(chuàng)建工作。
方案2:只使用 PDF 庫
NPM上有幾個庫,如 jsPDF(如上所述)或PDFKit。他們的問題是,如果我想使用這些庫,我將不得不重新調(diào)整頁面結(jié)構(gòu)。這肯定會損害可維護(hù)性,因為我需要將所有后續(xù)更改應(yīng)用到 PDF 模板和 React 頁面中。
請看下面的代碼。你需要親自手動創(chuàng)建 PDF 文檔。你需要遍歷 DOM 并找出每個元素并將其轉(zhuǎn)換為 PDF 格式,這是一項繁瑣的工作。必須找到一個更簡單的方法。
這段代碼段來自 PDFKit 文檔。但是如果你的目標(biāo)是直接生成一個 PDF 文件,而不是對一個已經(jīng)存在的(并且不斷變化的)HTML 頁面進(jìn)行轉(zhuǎn)換,它還是很有用的。
最終方案3:基于 Node.js 的 Puppeteer 和 Headless Chrome
什么是 Puppeteer?其文檔中寫道:
Puppeteer 是一個 Node 庫,它提供了一個高級 API 來控制 DevTools 協(xié)議上的 Chrome 或 Chromium。 Puppeteer 默認(rèn)以 headless 模式運(yùn)行 Chrome 或 Chromium,但其也可以被配置為完整的(non-headless)模式運(yùn)行。
它本質(zhì)上是一個可以從 Node.js 運(yùn)行的瀏覽器。如果你讀過它的文檔,其中首先提到的就是你可以用 Puppeteer 來生成頁面的截圖和PDF。優(yōu)秀!這正是我們想要的。
先用 npmi i puppeteer 安裝 Puppeteer,并實現(xiàn)我們的功能。
這是一個簡單的功能,可導(dǎo)航到 URL 并生成站點(diǎn)的 PD F文件。
首先,我們啟動瀏覽器(僅在 headless 模式下支持 PDF 生成),然后打開新頁面,設(shè)置視口,并導(dǎo)航到提供的URL。
設(shè)置 waitUntil:'networkidle0' 選項意味著當(dāng)至少500毫秒沒有網(wǎng)絡(luò)連接時,Puppeteer 會認(rèn)為導(dǎo)航已完成。 (可以從 API docs 獲取更多信息。)
之后,我們將 PDF 保存為變量,關(guān)閉瀏覽器并返回 PDF。
注意:page.pdf 方法接收 options 對象,你可以使用 'path' 選項將文件保存到磁盤。如果未提供路徑,則 PDF 將不會被保存到磁盤,而是會得到緩沖區(qū)。(稍后我將討論如何處理它。)
如果需要先登錄才能從受保護(hù)的頁面生成 PDF,首先你要導(dǎo)航到登錄頁面,檢查表單元素的 ID 或名稱,填寫它們,然后提交表單:
要始終將登錄憑據(jù)保存在環(huán)境變量中,不要硬編碼!
樣式控制
Puppeteer 也有這種樣式操作的解決方案。你可以在生成 PDF 之前插入樣式標(biāo)記,Puppeteer 將生成具有已修改樣式的文件。
await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })
將文件發(fā)送到客戶端并保存
好的,現(xiàn)在你已經(jīng)在后端生成了一個 PDF 文件。接下來做什么?
如上所述,如果你不把文件保存到磁盤,將會得到一個緩沖區(qū)。你只需要把含有適當(dāng)內(nèi)容類型的緩沖區(qū)發(fā)送到前端即可。
現(xiàn)在,你只需在瀏覽器向服務(wù)器發(fā)送請求即可得到生成的 PDF。
一旦發(fā)送了請求,緩沖區(qū)的內(nèi)容就應(yīng)該開始下載了。最后一步是將緩沖區(qū)數(shù)據(jù)轉(zhuǎn)換為 PDF 文件。
就這樣!如果單擊“保存”按鈕,那么瀏覽器將會保存 PDF。
在 Docker 中使用 Puppeteer
我認(rèn)為這是實施中最棘手的部分 —— 所以讓我?guī)湍愎?jié)省幾個小時的百度時間。
官方文檔指出*“在 Docker 中使用 headless Chrome 并使其運(yùn)行起來可能會非常棘手”*。官方文檔有疑難解答部分,你可以找到有關(guān)用 Docker 安裝 puppeteer 的所有必要信息。
如果你在 Alpine 鏡像上安裝 Puppeteer,請確保在看到頁面的這一部分時再向下滾動一點(diǎn)。否則你可能會忽略一個事實:你無法運(yùn)行最新的 Puppeteer 版本,并且你還需要用一個標(biāo)記禁用 shm :
const browser=await puppeteer.launch({ headless: true, args: ['--disable-dev-shm-usage'] });
否則,Puppeteer 子進(jìn)程可能會在正常啟動之前耗盡內(nèi)存。
方案 3 + 1:CSS 打印規(guī)則
可能有人認(rèn)為從開發(fā)人員的角度來看,簡單地使用 CSS 打印規(guī)則很容易。沒有 NPM 模塊,只有純 CSS。但是在跨瀏覽器兼容性方面,它的表現(xiàn)如何呢?
在選擇 CSS 打印規(guī)則時,你必須在每個瀏覽器中測試結(jié)果,以確保它提供的布局是相同的,并且它不是100%能做到這一點(diǎn)。
例如,在給定元素后面插入一個 break-after 并不是一個多么高深的技術(shù),但是你可能會驚訝的發(fā)現(xiàn)要在 Firefox 中使用它需要使用變通方法。
除非你是一位經(jīng)驗豐富的 CSS 大師,在創(chuàng)建可打印頁面方面有很多的經(jīng)驗,否則這可能會非常耗時。
如果你可以使打印樣式表保持簡單,打印規(guī)則是很好用的。
讓我們來看一個例子吧。
@media print { .print-button { display: none; } .content div { break-after: always; } }
上面的 CSS 隱藏了打印按鈕,并在每個 div 之后插入一個分頁符,其中包含content 類。有一篇很棒的文章總結(jié)了你可以用打印規(guī)則做什么,以及它們有什么問題,包括瀏覽器兼容性。
考慮到所有因素,如果你想從不那么復(fù)雜的頁面生成 PDF,CSS打印規(guī)則非常有效。
總結(jié)
讓我們快速回顧前面介紹的方案,以便從 HTML 頁面生成 PDF 文件:
雖然今天是愚人節(jié),但是以上所有內(nèi)容都是在真的!
作者:瘋狂的技術(shù)宅
鏈接:https://juejin.im/post/5ca1dc0251882543d569e075
、nuget 引用
Select.HtmlToPdf
2、方法
using SelectPdf;
using System.Collections.Specialized;
using System.IO;
using System.Web;
namespace BQoolCommon.Helpers.File
{
public class WebToPdf
{
public WebToPdf()
{
//SelectPdf.GlobalProperties.LicenseKey="your-license-key";
}
/// <summary>
/// 將 Html 轉(zhuǎn)成 PDF,並儲存成檔案
/// </summary>
/// <param name="html">html</param>
/// <param name="fileName">絕對路徑</param>
public void SaveToFileByHtml(string html, string fileName)
{
var doc=SetPdfDocument(html);
doc.Save(fileName);
}
/// <summary>
/// 傳入 Url 轉(zhuǎn)成 PDF,並儲存成檔案
/// </summary>
/// <param name="url">url</param>
/// <param name="fileName">絕對路徑</param>
/// <param name="httpCookies">Cookies</param>
public void SaveToFileByUrl(string url, string fileName, NameValueCollection httpCookies)
{
var doc=SetPdfDocument(url, httpCookies);
doc.Save(fileName);
}
/// <summary>
/// 將 Html 轉(zhuǎn)成 PDF,並輸出成 byte[] 格式
/// </summary>
/// <param name="html">html</param>
/// <returns></returns>
public byte[] GetFileByteByHtml(string html)
{
var doc=SetPdfDocument(html);
return doc.Save();
}
/// <summary>
/// 傳入 Url 轉(zhuǎn)成 PDF,並輸出成 byte[] 格式
/// </summary>
/// <param name="url">url</param>
/// <param name="httpCookies">Cookies</param>
/// <returns></returns>
public byte[] GetFileByteByUrl(string url, NameValueCollection httpCookies)
{
var doc=SetPdfDocument(url, httpCookies);
return doc.Save();
}
/// <summary>
/// 將 Html 轉(zhuǎn)成 PDF,並輸出成 Stream 格式
/// </summary>
/// <param name="html">html</param>
/// <returns></returns>
public Stream GetFileStreamByHtml(string html)
{
var doc=SetPdfDocument(html);
var pdfStream=new MemoryStream();
doc.Save(pdfStream);
pdfStream.Position=0;
return pdfStream;
}
/// <summary>
/// 傳入 Url 轉(zhuǎn)成 PDF,並輸出成 Stream 格式
/// </summary>
/// <param name="html">html</param>
/// <returns></returns>
public Stream GetFileStreamByUrl(string url, NameValueCollection httpCookies)
{
var doc=SetPdfDocument(url, httpCookies);
var pdfStream=new MemoryStream();
doc.Save(pdfStream);
pdfStream.Position=0;
return pdfStream;
}
private PdfDocument SetPdfDocument(string html)
{
var converter=new HtmlToPdf();
converter.Options.WebPageWidth=1200;
html=HttpUtility.HtmlDecode(html);
return converter.ConvertHtmlString(html);
}
private PdfDocument SetPdfDocument(string url, NameValueCollection httpCookies)
{
var converter=new HtmlToPdf();
converter.Options.WebPageWidth=1200;
if (httpCookies != && httpCookies.Count !=0)
{
converter.Options.HttpCookies.Add(httpCookies);
}
return converter.ConvertUrl(url);
}
}
}
嘍,今天是一篇HTML to PDF速食指南。
Java 轉(zhuǎn)換 HTML 到PDF有許多類庫,今天我們介紹一下第三方免費(fèi)的類庫OpenPDF。
OpenPDF是免費(fèi)的Java類庫 ,遵從LGPL 和 MPL協(xié)議,所以基本上能夠可以隨意使用。OpenPDF是基于iTEXT的,目前來說也是維護(hù)的比較好的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文件轉(zhuǎn)換成輸入流等,也可以遍歷html的DOM節(jié)點(diǎn),提取元素及樣式等。
本篇示例將以下html文件轉(zhuǎn)換成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用瀏覽器打開如下,亂碼是因為中文字體不識別,下面轉(zhuǎn)換的時候會加載對應(yīng)的字體來進(jìn)行轉(zhuǎn)換。
使用Java轉(zhuǎn)換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);
//引入資源目錄,可以單獨(dú)引入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代碼轉(zhuǎn)換成PDF如下(示例中使用了微軟雅黑中文字體):
上述html文件中增加如下外部樣式:
<link href="style.css" rel="stylesheet">
并在resources目錄下添加style.css文件,重新生成PDF文件如下。
本片介紹了使用OpenPDF將html文件轉(zhuǎn)換成PDF文件。同時也使用了自定義字體,外部樣式。但是以下幾點(diǎn)需要格外注意。
全部示例在此:https://github.com/javatechnorth/java-study-note/tree/master/javaOpenSource/src/main/java/pdf
文章來源:Java技術(shù)指北
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。