把HTML轉成PDF的4個方案及實現方法

在本文中，我將展現如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式複雜的 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的庫

開始編碼：

[JavaScript]

純文本查看

複製代碼

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

npm install html2canvas jspdf import html2canvas from 'html2canvas' import jsPdf from 'jspdf' function printPDF () { const domElement = document.getElementById( 'your-id' ) html2canvas(domElement, { onclone: (document) => { document.getElementById( 'print-button' ).style.visibility = 'hidden' }}) .then((canvas) => { const img = canvas.toDataURL( 'image/png' ) const pdf = new jsPdf() pdf.addImage(imgData, 'JPEG' , 0, 0, width, height) pdf.save( 'your-filename.pdf' ) })

就這樣！
請注意 html2canvas 的 onclone方法。當你在截圖以前須要操縱 DOM（例如隱藏打印按鈕）時，它是很是方便的。我看到過不少使用這個包的項目。但不幸的是，這不是咱們想要的，由於咱們須要在後端完成對 PDF 的建立工做。
方案2：只使用 PDF 庫
NPM上有幾個庫，如 jsPDF（如上所述）或PDFKit。他們的問題是，若是我想使用這些庫，我將不得不從新調整頁面結構。這確定會損害可維護性，由於我須要將全部後續更改應用到 PDF 模板和 React 頁面中。
請看下面的代碼。你須要親自手動建立 PDF 文檔。你須要遍歷 DOM 並找出每一個元素並將其轉換爲 PDF 格式，這是一項繁瑣的工做。必須找到一個更簡單的方法。

[JavaScript]

純文本查看

複製代碼

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

doc = new PDFDocument doc.pipe fs.createWriteStream( 'output.pdf' ) doc.font( 'fonts/PalatinoBold.ttf' ) .fontSize(25) .text( 'Some text with an embedded font!' , 100, 100) doc.image( 'path/to/image.png' , { fit: [250, 300], align: 'center' , valign: 'center' }); doc.addPage() .fontSize(25) .text( 'Here is some vector graphics...' , 100, 100) doc.end()

這段代碼段來自 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，並實現咱們的功能。

[JavaScript]

純文本查看

複製代碼

?

01 02 03 04 05 06 07 08 09 10 11

const puppeteer = require( 'puppeteer' ) async function printPDF() { const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); await page.goto( 'https://blog.risingstack.com' , {waitUntil: 'networkidle0' }); const pdf = await page.pdf({ format: 'A4' }); await browser.close(); return pdf })

這是一個簡單的功能，可導航到 URL 並生成站點的 PD F文件。
首先，咱們啓動瀏覽器（僅在 headless 模式下支持 PDF 生成），而後打開新頁面，設置視口，並導航到提供的URL。
設置 waitUntil:'networkidle0' 選項意味着當至少500毫秒沒有網絡鏈接時，Puppeteer 會認爲導航已完成。 （能夠從 API docs 獲取更多信息。）
以後，咱們將 PDF 保存爲變量，關閉瀏覽器並返回 PDF。
注意：page.pdf 方法接收 options 對象，你可使用 'path' 選項將文件保存到磁盤。若是未提供路徑，則 PDF 將不會被保存到磁盤，而是會獲得緩衝區。（稍後我將討論如何處理它。）
若是須要先登陸才能從受保護的頁面生成 PDF，首先你要導航到登陸頁面，檢查表單元素的 ID 或名稱，填寫它們，而後提交表單：

[JavaScript]

純文本查看

複製代碼

?

1 2 3

await page.type( '#email' , process.env.PDF_USER) await page.type( '#password' , process.env.PDF_PASSWORD) await page.click( '#submit' )

要始終將登陸憑據保存在環境變量中，不要硬編碼！
樣式控制
Puppeteer 也有這種樣式操做的解決方案。你能夠在生成 PDF 以前插入樣式標記，Puppeteer 將生成具備已修改樣式的文件。

[JavaScript]

純文本查看

複製代碼

?

1	await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })

將文件發送到客戶端並保存
好的，如今你已經在後端生成了一個 PDF 文件。接下來作什麼？
如上所述，若是你不把文件保存到磁盤，將會獲得一個緩衝區。你只須要把含有適當內容類型的緩衝區發送到前端便可。

[JavaScript]

純文本查看

複製代碼

?

1 2 3

printPDF.then(pdf => { res.set({ 'Content-Type' : 'application/pdf' , 'Content-Length' : pdf.length }) res.send(pdf)

如今，你只需在瀏覽器向服務器發送請求便可獲得生成的 PDF。

[JavaScript]

純文本查看

複製代碼

?

1 2 3 4 5 6 7

function getPDF() { return axios.get(`${API_URL}/your-pdf-endpoint`, { responseType: 'arraybuffer' , headers: { 'Accept' : 'application/pdf' } })

一旦發送了請求，緩衝區的內容就應該開始下載了。最後一步是將緩衝區數據轉換爲 PDF 文件。

[JavaScript]

純文本查看

複製代碼

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14

savePDF = () => { this .openModal(‘Loading…’) // open modal return getPDF() // API call .then((response) => { const blob = new Blob([response.data], {type: 'application/pdf' }) const link = document.createElement( 'a' ) link.href = window.URL.createObjectURL(blob) link.download = `your-file-name.pdf` link.click() this .closeModal() // close modal }) . catch (err => /** error handling **/ ) } <button onClick={ this .savePDF}>Save as PDF</button>

就這樣！若是單擊「保存」按鈕，那麼瀏覽器將會保存 PDF。
在 Docker 中使用 Puppeteer
我認爲這是實施中最棘手的部分 —— 因此讓我幫你節省幾個小時的百度時間。
官方文檔指出*「在 Docker 中使用 headless Chrome 並使其運行起來可能會很是棘手」*。官方文檔有疑難解答部分，你能夠找到有關用 Docker 安裝 puppeteer 的全部必要信息。
若是你在 Alpine 鏡像上安裝 Puppeteer，請確保在看到頁面的這一部分時再向下滾動一點。不然你可能會忽略一個事實：你沒法運行最新的 Puppeteer 版本，而且你還須要用一個標記禁用 shm ：

[JavaScript]

純文本查看

複製代碼

?

1 2 3 4

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 大師，在建立可打印頁面方面有不少的經驗，不然這可能會很是耗時。
若是你可使打印樣式表保持簡單，打印規則是很好用的。
讓咱們來看一個例子吧。

[CSS]

純文本查看

複製代碼

?

1 2 3 4 5 6 7 8 9

@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