把HTML轉(zhuǎn)成PDF的4個(gè)方案及實(shí)現(xiàn)方法

本文中，我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式復(fù)雜的 React 頁面生成 PDF 文檔。

背景：幾個(gè)月前，一個(gè)客戶要求我們開發(fā)一個(gè)功能，用戶可以得到 PDF 格式的 React 頁面內(nèi)容。該頁面基本上是患者病例的報(bào)告和數(shù)據(jù)可視化結(jié)果，其中包含許多 SVG。另外還有一些特殊的請求來操縱布局，并對 HTML 元素進(jìn)行一些重新排列。因此與原始的 React 頁面相比，PDF 中應(yīng)該有不同的樣式和額外的內(nèi)容。

由于這個(gè)任務(wù)比用簡單的 CSS 規(guī)則解決要復(fù)雜得多，所以我們先探討了可能的實(shí)現(xiàn)方法。我們找到了 3 個(gè)主要解決方案。這篇博文將指導(dǎo)你了解它們的可能性并最終實(shí)施。

在客戶端還是服務(wù)器端生成？
方案1：從 DOM 制作屏幕截圖
方案2：僅使用 PDF 庫
最終方案3：Node.js、Puppeteer 和 Headless Chrome
樣式控制
將文件發(fā)送到客戶端并保存
在 Docker 中使用 Puppeteer
方案3 +1：CSS打印規(guī)則
總結(jié)

在客戶端還是服務(wù)器端生成？

在客戶端和服務(wù)器端都可以生成PDF文件。但是讓后端處理它可能更有意義，因?yàn)槟悴⒉幌牒谋M用戶瀏覽器可以提供的所有資源。

即便如此，我仍然會(huì)展示這兩種方法的解決方案。

方案1：從 DOM 制作屏幕截圖

乍一看，這個(gè)解決方案似乎是最簡單的，事實(shí)證明的確是這樣，但它有其自身的局限性。如果你沒有特殊需求，例如在 PDF 中選擇文本或?qū)ξ谋具M(jìn)行搜索，那么這就是一種簡單易用的方法。

此方法簡單明了：從頁面創(chuàng)建屏幕截圖，并把它放到 PDF 文件中。非常直截了當(dāng)。我們可以使用兩個(gè)包來實(shí)現(xiàn)：

Html2canvas，根據(jù) DOM 生成截圖
jsPdf，一個(gè)生成PDF的庫

開始編碼：

npm install html2canvas jspdf

就這樣！

請注意 html2canvas 的 onclone方法。當(dāng)你在截圖之前需要操縱 DOM（例如隱藏打印按鈕）時(shí)，它是非常方便的。我看到過很多使用這個(gè)包的項(xiàng)目。但不幸的是，這不是我們想要的，因?yàn)槲覀冃枰诤蠖送瓿蓪?PDF 的創(chuàng)建工作。

方案2：只使用 PDF 庫

NPM上有幾個(gè)庫，如 jsPDF（如上所述）或PDFKit。他們的問題是，如果我想使用這些庫，我將不得不重新調(diào)整頁面結(jié)構(gòu)。這肯定會(huì)損害可維護(hù)性，因?yàn)槲倚枰獙⑺泻罄m(xù)更改應(yīng)用到 PDF 模板和 React 頁面中。

請看下面的代碼。你需要親自手動(dòng)創(chuàng)建 PDF 文檔。你需要遍歷 DOM 并找出每個(gè)元素并將其轉(zhuǎn)換為 PDF 格式，這是一項(xiàng)繁瑣的工作。必須找到一個(gè)更簡單的方法。

這段代碼段來自 PDFKit 文檔。但是如果你的目標(biāo)是直接生成一個(gè) PDF 文件，而不是對一個(gè)已經(jīng)存在的（并且不斷變化的）HTML 頁面進(jìn)行轉(zhuǎn)換，它還是很有用的。

最終方案3：基于 Node.js 的 Puppeteer 和 Headless Chrome

什么是 Puppeteer？其文檔中寫道：

Puppeteer 是一個(gè) Node 庫，它提供了一個(gè)高級 API 來控制 DevTools 協(xié)議上的 Chrome 或 Chromium。 Puppeteer 默認(rèn)以 headless 模式運(yùn)行 Chrome 或 Chromium，但其也可以被配置為完整的（non-headless）模式運(yùn)行。

它本質(zhì)上是一個(gè)可以從 Node.js 運(yùn)行的瀏覽器。如果你讀過它的文檔，其中首先提到的就是你可以用 Puppeteer 來生成頁面的截圖和PDF。優(yōu)秀！這正是我們想要的。

先用 npmi i puppeteer 安裝 Puppeteer，并實(shí)現(xiàn)我們的功能。

這是一個(gè)簡單的功能，可導(dǎo)航到 URL 并生成站點(diǎn)的 PD F文件。

首先，我們啟動(dòng)瀏覽器（僅在 headless 模式下支持 PDF 生成），然后打開新頁面，設(shè)置視口，并導(dǎo)航到提供的URL。

設(shè)置 waitUntil:'networkidle0' 選項(xiàng)意味著當(dāng)至少500毫秒沒有網(wǎng)絡(luò)連接時(shí)，Puppeteer 會(huì)認(rèn)為導(dǎo)航已完成。（可以從 API docs 獲取更多信息。）

之后，我們將 PDF 保存為變量，關(guān)閉瀏覽器并返回 PDF。

注意：page.pdf 方法接收 options 對象，你可以使用 'path' 選項(xiàng)將文件保存到磁盤。如果未提供路徑，則 PDF 將不會(huì)被保存到磁盤，而是會(huì)得到緩沖區(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)在后端生成了一個(gè) PDF 文件。接下來做什么？

如上所述，如果你不把文件保存到磁盤，將會(huì)得到一個(gè)緩沖區(qū)。你只需要把含有適當(dāng)內(nèi)容類型的緩沖區(qū)發(fā)送到前端即可。

現(xiàn)在，你只需在瀏覽器向服務(wù)器發(fā)送請求即可得到生成的 PDF。

一旦發(fā)送了請求，緩沖區(qū)的內(nèi)容就應(yīng)該開始下載了。最后一步是將緩沖區(qū)數(shù)據(jù)轉(zhuǎn)換為 PDF 文件。

就這樣！如果單擊“保存”按鈕，那么瀏覽器將會(huì)保存 PDF。

在 Docker 中使用 Puppeteer

我認(rèn)為這是實(shí)施中最棘手的部分 —— 所以讓我?guī)湍愎?jié)省幾個(gè)小時(shí)的百度時(shí)間。

官方文檔指出*“在 Docker 中使用 headless Chrome 并使其運(yùn)行起來可能會(huì)非常棘手”*。官方文檔有疑難解答部分，你可以找到有關(guān)用 Docker 安裝 puppeteer 的所有必要信息。

如果你在 Alpine 鏡像上安裝 Puppeteer，請確保在看到頁面的這一部分時(shí)再向下滾動(dòng)一點(diǎn)。否則你可能會(huì)忽略一個(gè)事實(shí)：你無法運(yùn)行最新的 Puppeteer 版本，并且你還需要用一個(gè)標(biāo)記禁用 shm ：

const browser = await puppeteer.launch({
 headless: true,
 args: ['--disable-dev-shm-usage']
});

否則，Puppeteer 子進(jìn)程可能會(huì)在正常啟動(dòng)之前耗盡內(nèi)存。

方案 3 + 1：CSS 打印規(guī)則

可能有人認(rèn)為從開發(fā)人員的角度來看，簡單地使用 CSS 打印規(guī)則很容易。沒有 NPM 模塊，只有純 CSS。但是在跨瀏覽器兼容性方面，它的表現(xiàn)如何呢？

在選擇 CSS 打印規(guī)則時(shí)，你必須在每個(gè)瀏覽器中測試結(jié)果，以確保它提供的布局是相同的，并且它不是100％能做到這一點(diǎn)。

例如，在給定元素后面插入一個(gè) break-after 并不是一個(gè)多么高深的技術(shù)，但是你可能會(huì)驚訝的發(fā)現(xiàn)要在 Firefox 中使用它需要使用變通方法。

除非你是一位經(jīng)驗(yàn)豐富的 CSS 大師，在創(chuàng)建可打印頁面方面有很多的經(jīng)驗(yàn)，否則這可能會(huì)非常耗時(shí)。

如果你可以使打印樣式表保持簡單，打印規(guī)則是很好用的。

讓我們來看一個(gè)例子吧。

@media print {
 .print-button {
 display: none;
 }
 
 .content div {
 break-after: always;
 }
}

上面的 CSS 隱藏了打印按鈕，并在每個(gè) div 之后插入一個(gè)分頁符，其中包含content 類。有一篇很棒的文章總結(jié)了你可以用打印規(guī)則做什么，以及它們有什么問題，包括瀏覽器兼容性。

考慮到所有因素，如果你想從不那么復(fù)雜的頁面生成 PDF，CSS打印規(guī)則非常有效。

總結(jié)

讓我們快速回顧前面介紹的方案，以便從 HTML 頁面生成 PDF 文件：

從 DOM 產(chǎn)生截圖：當(dāng)你需要從頁面創(chuàng)建快照時(shí)（例如創(chuàng)建縮略圖）可能很有用，但是當(dāng)你需要處理大量數(shù)據(jù)時(shí)就會(huì)有些捉襟見肘。
只用 PDF 庫：如果你打算從頭開始以編程方式創(chuàng)建 PDF 文件，這是一個(gè)完美的解決方案。否則，你需要同時(shí)維護(hù) HTML 和 PDF 模板，這絕對是一個(gè)禁忌。
Puppeteer：盡管在 Docker 上工作相對困難，但它為我們的實(shí)現(xiàn)提供了最好的結(jié)果，而且編寫代碼也是最簡單的。
CSS打印規(guī)則：如果你的用戶受過足夠的教育，知道如何把頁面內(nèi)容打印到文件，并且你的頁面相對簡單，那么它可能是最輕松的解決方案。正如你在我們的案例中所看到的，事實(shí)并非如此。

雖然今天是愚人節(jié)，但是以上所有內(nèi)容都是在真的！

作者：瘋狂的技術(shù)宅

鏈接：https://juejin.im/post/5ca1dc0251882543d569e075

保存在線文章以便日后查閱，如何實(shí)現(xiàn)？想將網(wǎng)頁內(nèi)容轉(zhuǎn)為PDF保存，如何轉(zhuǎn)換？

今天，小福教大家如何將網(wǎng)頁生成PDF文件，跟著小福一起來看看吧！

首先，我們打開福昕高級PDF編輯器，選擇左上角“文件”>“創(chuàng)建”>“從網(wǎng)頁”，或點(diǎn)擊菜單欄“轉(zhuǎn)換”>“從網(wǎng)頁”；

在彈出的對話框中，粘貼轉(zhuǎn)換的網(wǎng)頁的URL鏈接，點(diǎn)擊“創(chuàng)建”，福昕高級PDF編輯器將開始加載網(wǎng)頁內(nèi)容；

加載完畢后，網(wǎng)頁就被轉(zhuǎn)為PDF啦！此時(shí)，我們就可以對該頁面進(jìn)行進(jìn)一步的編輯和調(diào)整，如文字提取、編輯、添加注釋、劃重點(diǎn)等。完成編輯后，點(diǎn)擊保存即可。

此外，在轉(zhuǎn)換時(shí)，我們可以點(diǎn)擊“設(shè)置”來選擇更多轉(zhuǎn)換選項(xiàng)：

在彈出的“網(wǎng)頁轉(zhuǎn)換設(shè)置”對話框中，有“常規(guī)”和“頁面布局”選項(xiàng)卡。常規(guī)選項(xiàng)卡可以設(shè)置網(wǎng)頁的轉(zhuǎn)換等級和轉(zhuǎn)換內(nèi)容，頁面布局則可設(shè)置生成的PDF的頁面尺寸、頁邊距和方向，以及多媒體類型及縮放比例。

這里給大家說說常用的一些設(shè)置：

在“常規(guī)”選項(xiàng)卡中：

1、轉(zhuǎn)換等級：可以指定網(wǎng)站中要轉(zhuǎn)換的網(wǎng)頁等級，或勾選“轉(zhuǎn)換整個(gè)站點(diǎn)”。

轉(zhuǎn)換同一路徑的網(wǎng)頁：轉(zhuǎn)換隸屬于您輸入的網(wǎng)頁地址的所有網(wǎng)頁；轉(zhuǎn)換同一服務(wù)器上的網(wǎng)頁：轉(zhuǎn)換儲(chǔ)存在同一服務(wù)器上的所有網(wǎng)頁。

2、PDF設(shè)置：設(shè)置加載整個(gè)頁面的超時(shí)時(shí)間。超過此設(shè)置時(shí)間，加載進(jìn)程將自動(dòng)中止，且僅已加載內(nèi)容會(huì)被轉(zhuǎn)換成PDF。默認(rèn)值為120秒。

在所生成的PDF文件中禁用所有超鏈接：勾選該項(xiàng)后，轉(zhuǎn)換生成的PDF中的所有超鏈接均為無效鏈接。
將所有的頁面內(nèi)容轉(zhuǎn)換到同一個(gè)PDF頁面：勾選該項(xiàng)后，所有相關(guān)內(nèi)容將被轉(zhuǎn)換到同一個(gè)PDF頁面中。
創(chuàng)建書簽：勾選該項(xiàng)，轉(zhuǎn)換后將自動(dòng)生成被轉(zhuǎn)換頁面的書簽。書簽名為網(wǎng)頁的域名。當(dāng)網(wǎng)頁域名相同時(shí)，將自動(dòng)創(chuàng)建子書簽并以頁面的標(biāo)題作為子書簽的名稱。若頁面沒有標(biāo)題，則使用對應(yīng)的URL作為子書簽的名稱。
創(chuàng)建 PDF 標(biāo)簽：勾選該項(xiàng)以創(chuàng)建包含標(biāo)簽和其他輔助信息的PDF文檔。
在新建頁面放置頁眉和頁腳：在生成的 PDF 的每一頁上放置頁眉和頁腳。頁眉顯示您創(chuàng)建PDF的日期和網(wǎng)頁標(biāo)題。頁腳顯示網(wǎng)頁URL（或 HTML 文件的文件路徑）和頁碼。
背景圖像：勾選該項(xiàng)以保留頁面背景，生成的 PDF 看起來將與原始網(wǎng)頁完全一樣。有時(shí)，網(wǎng)頁上的背景可能會(huì)影響文本的顯示效果，您可以取消勾選該項(xiàng)，這樣轉(zhuǎn)換后的頁面可能與網(wǎng)頁瀏覽器中顯示的不同，但更易于閱讀。

3、其他設(shè)置：

轉(zhuǎn)換圖像：如需在 PDF 轉(zhuǎn)換時(shí)轉(zhuǎn)換圖像，請勾選此項(xiàng)；反之則取消勾選。
為鏈接添加下劃線：如需在生成的 PDF 中為網(wǎng)頁鏈接文本添加下劃線，請勾選此項(xiàng)；反之則取消勾選。

以上就是本期所有內(nèi)容，我們下期再見啦！

者|江下科技

怎樣把網(wǎng)頁內(nèi)容保存為PDF文件格式

到網(wǎng)上收集信息資料時(shí)，如果想要將整個(gè)網(wǎng)頁內(nèi)容保存下來，最簡單的方法是什么？不是復(fù)制粘貼，而是保存為本地文件，而在眾多格式中，PDF絕對是符合大家對文檔各種要求的一種格式。所以將網(wǎng)頁內(nèi)容保存為PDF格式，是個(gè)不錯(cuò)的選擇呢。

具體實(shí)現(xiàn)方法是什么呢？不著急，下面小江就來為大家一一介紹，用到的工具和操作方法都分享到以下內(nèi)容啦，有需要的小伙伴可收藏后觀看哦！