翻譯：瘋狂的技術宅
原文：https://blog./...
本文首發(fā)微信公眾號：jingchengyideng
歡迎關注，每天都給你推送新鮮的前端技術文章
在本文中，我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式復雜的 React 頁面生成 PDF 文檔。
背景：幾個月前，一個客戶要求我們開發(fā)一個功能，用戶可以得到 PDF 格式的 React 頁面內容。該頁面基本上是患者病例的報告和數(shù)據(jù)可視化結果，其中包含許多 SVG。另外還有一些特殊的請求來操縱布局，并對 HTML 元素進行一些重新排列。因此與原始的 React 頁面相比，PDF 中應該有不同的樣式和額外的內容。
由于這個任務比用簡單的 CSS 規(guī)則解決要復雜得多，所以我們先探討了可能的實現(xiàn)方法。我們找到了 3 個主要解決方案。這篇博文將指導你了解它們的可能性并最終實施。
目錄：
在客戶端還是服務器端生成？
方案1：從 DOM 制作屏幕截圖
方案2：僅使用 PDF 庫
最終方案3：Node.js、Puppeteer 和 Headless Chrome
樣式控制
將文件發(fā)送到客戶端并保存
在 Docker 中使用 Puppeteer
方案3 +1：CSS打印規(guī)則
總結
在客戶端還是服務器端生成？
在客戶端和服務器端都可以生成PDF文件。但是讓后端處理它可能更有意義，因為你并不想耗盡用戶瀏覽器可以提供的所有資源。
即便如此，我仍然會展示這兩種方法的解決方案。
方案1：從 DOM 制作屏幕截圖
乍一看，這個解決方案似乎是最簡單的，事實證明的確是這樣，但它有其自身的局限性。如果你沒有特殊需求，例如在 PDF 中選擇文本或對文本進行搜索，那么這就是一種簡單易用的方法。
此方法簡單明了：從頁面創(chuàng)建屏幕截圖，并把它放到 PDF 文件中。非常直截了當。我們可以使用兩個包來實現(xiàn)：
Html2canvas，根據(jù) DOM 生成截圖
jsPdf，一個生成PDF的庫
開始編碼：
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 的創(chuàng)建工作。
方案2：只使用 PDF 庫
NPM上有幾個庫，如 jsPDF（如上所述）或PDFKit。他們的問題是，如果我想使用這些庫，我將不得不重新調整頁面結構。這肯定會損害可維護性，因為我需要將所有后續(xù)更改應用到 PDF 模板和 React 頁面中。
請看下面的代碼。你需要親自手動創(chuàng)建 PDF 文檔。你需要遍歷 DOM 并找出每個元素并將其轉換為 PDF 格式，這是一項繁瑣的工作。必須找到一個更簡單的方法。
doc = new PDFDocumentdoc.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 協(xié)議上的 Chrome 或 Chromium。 Puppeteer 默認以 headless 模式運行 Chrome 或 Chromium，但其也可以被配置為完整的（non-headless）模式運行。
它本質上是一個可以從 Node.js 運行的瀏覽器。如果你讀過它的文檔，其中首先提到的就是你可以用 Puppeteer 來生成頁面的截圖和PDF。優(yōu)秀！這正是我們想要的。
先用 npmi i puppeteer 安裝 Puppeteer，并實現(xiàn)我們的功能。
const puppeteer = require('puppeteer')
async function printPDF() { const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPage(); await page.goto('https://blog.', {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 將不會被保存到磁盤，而是會得到緩沖區(qū)。（稍后我將討論如何處理它。）
如果需要先登錄才能從受保護的頁面生成 PDF，首先你要導航到登錄頁面，檢查表單元素的 ID 或名稱，填寫它們，然后提交表單：
await page.type('#email', process.env.PDF_USER)await page.type('#password', process.env.PDF_PASSWORD)await page.click('#submit')要始終將登錄憑據(jù)保存在環(huán)境變量中，不要硬編碼！
樣式控制
Puppeteer 也有這種樣式操作的解決方案。你可以在生成 PDF 之前插入樣式標記，Puppeteer 將生成具有已修改樣式的文件。
await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })將文件發(fā)送到客戶端并保存
好的，現(xiàn)在你已經在后端生成了一個 PDF 文件。接下來做什么？
如上所述，如果你不把文件保存到磁盤，將會得到一個緩沖區(qū)。你只需要把含有適當內容類型的緩沖區(qū)發(fā)送到前端即可。
printPDF.then(pdf => {
res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length })
res.send(pdf)現(xiàn)在，你只需在瀏覽器向服務器發(fā)送請求即可得到生成的 PDF。
function getPDF() { return axios.get(`${API_URL}/your-pdf-endpoint`, { responseType: 'arraybuffer', headers: { 'Accept': 'application/pdf'
}
})一旦發(fā)送了請求，緩沖區(qū)的內容就應該開始下載了。最后一步是將緩沖區(qū)數(shù)據(jù)轉換為 PDF 文件。
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
我認為這是實施中最棘手的部分 —— 所以讓我?guī)湍愎?jié)省幾個小時的百度時間。
官方文檔指出“在 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 打印規(guī)則
可能有人認為從開發(fā)人員的角度來看，簡單地使用 CSS 打印規(guī)則很容易。沒有 NPM 模塊，只有純 CSS。但是在跨瀏覽器兼容性方面，它的表現(xiàn)如何呢？
在選擇 CSS 打印規(guī)則時，你必須在每個瀏覽器中測試結果，以確保它提供的布局是相同的，并且它不是100％能做到這一點。
例如，在給定元素后面插入一個 break-after 并不是一個多么高深的技術，但是你可能會驚訝的發(fā)現(xiàn)要在 Firefox 中使用它需要使用變通方法。
除非你是一位經驗豐富的 CSS 大師，在創(chuàng)建可打印頁面方面有很多的經驗，否則這可能會非常耗時。
如果你可以使打印樣式表保持簡單，打印規(guī)則是很好用的。
讓我們來看一個例子吧。
@media print { .print-button { display: none;
}
.content div { break-after: always;
}
}上面的 CSS 隱藏了打印按鈕，并在每個 div 之后插入一個分頁符，其中包含content 類。有一篇很棒的文章總結了你可以用打印規(guī)則做什么，以及它們有什么問題，包括瀏覽器兼容性。
考慮到所有因素，如果你想從不那么復雜的頁面生成 PDF，CSS打印規(guī)則非常有效。
總結
讓我們快速回顧前面介紹的方案，以便從 HTML 頁面生成 PDF 文件：
從 DOM 產生截圖：當你需要從頁面創(chuàng)建快照時（例如創(chuàng)建縮略圖）可能很有用，但是當你需要處理大量數(shù)據(jù)時就會有些捉襟見肘。
只用 PDF 庫：如果你打算從頭開始以編程方式創(chuàng)建 PDF 文件，這是一個完美的解決方案。否則，你需要同時維護 HTML 和 PDF 模板，這絕對是一個禁忌。
Puppeteer：盡管在 Docker 上工作相對困難，但它為我們的實現(xiàn)提供了最好的結果，而且編寫代碼也是最簡單的。
CSS打印規(guī)則：如果你的用戶受過足夠的教育，知道如何把頁面內容打印到文件，并且你的頁面相對簡單，那么它可能是最輕松的解決方案。正如你在我們的案例中所看到的，事實并非如此。
打印快樂！
