翻譯:瘋狂的技術宅 原文:blog.risingstack.com/pdf-from-ht…javascript
在本文中,我將展現如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式複雜的 React 頁面生成 PDF 文檔。css
背景:幾個月前,一個客戶要求咱們開發一個功能,用戶能夠獲得 PDF 格式的 React 頁面內容。該頁面基本上是患者病例的報告和數據可視化結果,其中包含許多 SVG。另外還有一些特殊的請求來操縱佈局,並對 HTML 元素進行一些從新排列。所以與原始的 React 頁面相比,PDF 中應該有不一樣的樣式和額外的內容。html
因爲這個任務比用簡單的 CSS 規則解決要複雜得多,因此咱們先探討了可能的實現方法。咱們找到了 3 個主要解決方案。這篇博文將指導你瞭解它們的可能性並最終實施。前端
在客戶端和服務器端均可以生成PDF文件。可是讓後端處理它可能更有意義,由於你並不想耗盡用戶瀏覽器能夠提供的全部資源。java
即使如此,我仍然會展現這兩種方法的解決方案。node
乍一看,這個解決方案彷佛是最簡單的,事實證實的確是這樣,但它有其自身的侷限性。若是你沒有特殊需求,例如在 PDF 中選擇文本或對文本進行搜索,那麼這就是一種簡單易用的方法。ios
此方法簡單明瞭:從頁面建立屏幕截圖,並把它放到 PDF 文件中。很是直截了當。咱們可使用兩個包來實現:git
開始編碼:github
npm install html2canvas jspdf
docker
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 的建立工做。
NPM上有幾個庫,如 jsPDF(如上所述)或PDFKit。他們的問題是,若是我想使用這些庫,我將不得不從新調整頁面結構。這確定會損害可維護性,由於我須要將全部後續更改應用到 PDF 模板和 React 頁面中。
請看下面的代碼。你須要親自手動建立 PDF 文檔。你須要遍歷 DOM 並找出每一個元素並將其轉換爲 PDF 格式,這是一項繁瑣的工做。必須找到一個更簡單的方法。
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 頁面進行轉換,它仍是頗有用的。
什麼是 Puppeteer?其文檔中寫道:
Puppeteer 是一個 Node 庫,它提供了一個高級 API 來控制 DevTools 協議上的 Chrome 或 Chromium。 Puppeteer 默認以 headless 模式運行 Chrome 或 Chromium,但其也能夠被配置爲完整的(non-headless)模式運行。
它本質上是一個能夠從 Node.js 運行的瀏覽器。若是你讀過它的文檔,其中首先提到的就是你能夠用 Puppeteer 來生成頁面的截圖和PDF。優秀!這正是咱們想要的。
先用 npmi i puppeteer
安裝 Puppeteer,並實現咱們的功能。
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 或名稱,填寫它們,而後提交表單:
await page.type('#email', process.env.PDF_USER)
await page.type('#password', process.env.PDF_PASSWORD)
await page.click('#submit')
複製代碼
要始終將登陸憑據保存在環境變量中,不要硬編碼!
Puppeteer 也有這種樣式操做的解決方案。你能夠在生成 PDF 以前插入樣式標記,Puppeteer 將生成具備已修改樣式的文件。
await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })
複製代碼
好的,如今你已經在後端生成了一個 PDF 文件。接下來作什麼?
如上所述,若是你不把文件保存到磁盤,將會獲得一個緩衝區。你只須要把含有適當內容類型的緩衝區發送到前端便可。
printPDF.then(pdf => {
res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length })
res.send(pdf)
複製代碼
如今,你只需在瀏覽器向服務器發送請求便可獲得生成的 PDF。
function getPDF() {
return axios.get(`${API_URL}/your-pdf-endpoint`, {
responseType: 'arraybuffer',
headers: {
'Accept': 'application/pdf'
}
})
複製代碼
一旦發送了請求,緩衝區的內容就應該開始下載了。最後一步是將緩衝區數據轉換爲 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 中使用 headless Chrome 並使其運行起來可能會很是棘手」*。官方文檔有疑難解答部分,你能夠找到有關用 Docker 安裝 puppeteer 的全部必要信息。
若是你在 Alpine 鏡像上安裝 Puppeteer,請確保在看到頁面的這一部分時再向下滾動一點。不然你可能會忽略一個事實:你沒法運行最新的 Puppeteer 版本,而且你還須要用一個標記禁用 shm :
const browser = await puppeteer.launch({
headless: true,
args: ['--disable-dev-shm-usage']
});
複製代碼
不然,Puppeteer 子進程可能會在正常啓動以前耗盡內存。
可能有人認爲從開發人員的角度來看,簡單地使用 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打印規則:若是你的用戶受過足夠的教育,知道如何把頁面內容打印到文件,而且你的頁面相對簡單,那麼它多是最輕鬆的解決方案。正如你在咱們的案例中所看到的,事實並不是如此。
雖然今天是愚人節,可是以上全部內容都是在真的!
歡迎關注京程一燈公衆號:京程一燈,獲取更多前端乾貨。