如何將html轉為pdf（html網頁可以轉化為pdf嗎）

2023-03-23 06:35:51

在本文中，我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式複雜的 React 頁面生成 PDF 文件。

背景：幾個月前，一個客戶要求我們開發一個功能，使用者可以得到 PDF 格式的 React 頁面內容。該頁面基本上是患者病例的報告和資料視覺化結果，其中包含許多 SVG。另外還有一些特殊的請求來操縱佈局，並對 HTML 元素進行一些重新排列。因此與原始的 React 頁面相比，PDF 中應該有不同的樣式和額外的內容。

由於這個任務比用簡單的 CSS 規則解決要複雜得多，所以我們先探討了可能的實現方法。我們找到了 3 個主要解決方案。這篇博文將指導你瞭解它們的可能性並最終實施。

在客戶端還是伺服器端生成？
方案1：從 DOM 製作螢幕截圖
方案2：僅使用 PDF 庫
最終方案3：Node.js、Puppeteer 和 Headless Chrome
樣式控制
將檔案傳送到客戶端並儲存
在 Docker 中使用 Puppeteer
方案3 1：CSS列印規則
總結

在客戶端還是伺服器端生成？

在客戶端和伺服器端都可以生成PDF檔案。但是讓後端處理它可能更有意義，因為你並不想耗盡使用者瀏覽器可以提供的所有資源。

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

方案1：從 DOM 製作螢幕截圖

乍一看，這個解決方案似乎是最簡單的，事實證明的確是這樣，但它有其自身的侷限性。如果你沒有特殊需求，例如在 PDF 中選擇文字或對文字進行搜尋，那麼這就是一種簡單易用的方法。

此方法簡單明瞭：從頁面建立螢幕截圖，並把它放到 PDF 檔案中。非常直截了當。我們可以使用兩個包來實現：

Html2canvas，根據 DOM 生成截圖
jsPdf，一個生成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 檔案：

從 DOM 產生截圖：當你需要從頁面建立快照時（例如建立縮圖）可能很有用，但是當你需要處理大量資料時就會有些捉襟見肘。
只用 PDF 庫：如果你打算從頭開始以程式設計方式建立 PDF 檔案，這是一個完美的解決方案。否則，你需要同時維護 HTML 和 PDF 模板，這絕對是一個禁忌。
Puppeteer：儘管在 Docker 上工作相對困難，但它為我們的實現提供了最好的結果，而且編寫程式碼也是最簡單的。
CSS列印規則：如果你的使用者受過足夠的教育，知道如何把頁面內容列印到檔案，並且你的頁面相對簡單，那麼它可能是最輕鬆的解決方案。正如你在我們的案例中所看到的，事實並非如此。

雖然今天是愚人節，但是以上所有內容都是在真的！

作者：瘋狂的技術宅

連結：
https://juejin.im/post/5ca1dc0251882543d569e075