如何將HTML轉成PDF?方法介紹
在本文中,我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式複雜的 React 頁面產生 PDF 文件。
相關推薦:《nodejs 教學》
#背景:幾個月前,一個客戶要求我們開發一個功能,使用者可以得到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
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 格式,這是一項繁瑣的工作。必須找到一個更簡單的方法。
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,實現我們的功能。
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 中使用 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://blog.risingstack.com/pdf-from-html-node-js-puppeteer/
更多程式相關知識,請訪問:程式設計入門! !
以上是如何將HTML轉成PDF?方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲
