目錄
目錄:
在客戶端還是伺服器端產生?
方案1:從DOM 製作螢幕截圖
方案2:只使用 PDF 函式庫
最終方案3:基於 Node.js 的 Puppeteer 和 Headless Chrome
样式控制
将文件发送到客户端并保存
在 Docker 中使用 Puppeteer
方案 3 + 1:CSS 打印规则
总结
首頁 web前端 js教程 如何將HTML轉成PDF?方法介紹

如何將HTML轉成PDF?方法介紹

Dec 17, 2020 pm 05:42 PM
html pdf

如何將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 檔案中。非常直截了當。我們可以使用兩個套件來實作:

開始編碼:

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')
})
登入後複製

就這樣!

請注意 html2canvasonclone方法。當你在截圖之前需要操縱 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: [&#39;--disable-dev-shm-usage&#39;]
});
登入後複製

否则,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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1250
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

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

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles