網(wǎng)頁怎么打印成PDF文件？使用這款工具輕松實(shí)現(xiàn)

　平時不管我們是在網(wǎng)上瀏覽網(wǎng)頁，還是查找資料時，我們都會在遇到一些自己感興趣的內(nèi)容，而將這些內(nèi)容保存下來，才能夠方便日后我們有時間的時候進(jìn)行查看。

　　尤其是在需要打印考證時的準(zhǔn)考證、資格證書，又或者是查看公告的時候，我們經(jīng)常會發(fā)現(xiàn)，網(wǎng)頁上只能選擇直接打印，可是自己身邊又沒有打印機(jī)，此時，我們該怎么將重要的網(wǎng)頁內(nèi)容進(jìn)行保存呢？

　　其實(shí)，這里我們完全能夠采用將網(wǎng)頁保存成PDF文件格式的方法，來對網(wǎng)頁上的內(nèi)容進(jìn)行有效的保存和打印了。那么到底如何將網(wǎng)頁保存成PDF文件呢？其實(shí)我們只需要使用閃電PDF虛擬打印機(jī)軟件就能夠?qū)崿F(xiàn)這一需求了。下面就跟著小編一起來學(xué)習(xí)一下吧，這樣一來，網(wǎng)頁也能夠打印成好看的PDF文件了。

　　第一步，在電腦上下載并安裝閃電PDF虛擬打印機(jī)軟件。

　　第二步，在電腦的瀏覽器當(dāng)中，打開需要進(jìn)行保存或者是打印成PDF的網(wǎng)頁，然后按下鼠標(biāo)的右鍵，在彈出的選項當(dāng)中，選擇【打印】功能，或者是直接按下鍵盤上的【Ctrl】+【P】快捷鍵，來快速進(jìn)入到打印頁面。

　　第三步，此時就會彈出【打印】窗口了，在此窗口當(dāng)中，選擇【閃電PDF虛擬打印機(jī)】選項，然后再點(diǎn)擊【打印】按鈕。

　　第四步，稍等一會兒后，就會跳轉(zhuǎn)到【閃電PDF虛擬打印機(jī)】的界面了，在這里，我們將【格式】選擇為【PDF】，同時我們還能夠根據(jù)自己的實(shí)際需求，對文件名、導(dǎo)出路徑等其他選項進(jìn)行修改。

　　第五步，全部設(shè)置好以后，點(diǎn)擊界面下方的【導(dǎo)出】按鈕。

　　第六步，稍等一會兒后，軟件就會提示你網(wǎng)頁已經(jīng)成功的打印成PDF格式了。最后，雙擊打開文件進(jìn)行查看就可以了。

　　以上呢就是小編為大家總結(jié)的關(guān)于將網(wǎng)頁打印成PDF文件的方法了，如果你平時也遇到過像小編一樣，想要保存網(wǎng)頁卻只有打印的選項，而自己的身邊又沒有打印機(jī)的話，那么不妨跟著本文將網(wǎng)頁打印成PDF文件的方法學(xué)到手吧，這樣內(nèi)容既得到了保存，還能夠在后期進(jìn)行打印，非常的方便。

本文中，我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式復(fù)雜的 React 頁面生成 PDF 文檔。

背景：幾個月前，一個客戶要求我們開發(fā)一個功能，用戶可以得到 PDF 格式的 React 頁面內(nèi)容。該頁面基本上是患者病例的報告和數(shù)據(jù)可視化結(jié)果，其中包含許多 SVG。另外還有一些特殊的請求來操縱布局，并對 HTML 元素進(jìn)行一些重新排列。因此與原始的 React 頁面相比，PDF 中應(yīng)該有不同的樣式和額外的內(nèi)容。

由于這個任務(wù)比用簡單的 CSS 規(guī)則解決要復(fù)雜得多，所以我們先探討了可能的實(shí)現(xiàn)方法。我們找到了 3 個主要解決方案。這篇博文將指導(dǎo)你了解它們的可能性并最終實(shí)施。

在客戶端還是服務(wù)器端生成？
方案1：從 DOM 制作屏幕截圖
方案2：僅使用 PDF 庫
最終方案3：Node.js、Puppeteer 和 Headless Chrome
樣式控制
將文件發(fā)送到客戶端并保存
在 Docker 中使用 Puppeteer
方案3 +1：CSS打印規(guī)則
總結(jié)

在客戶端還是服務(wù)器端生成？

在客戶端和服務(wù)器端都可以生成PDF文件。但是讓后端處理它可能更有意義，因?yàn)槟悴⒉幌牒谋M用戶瀏覽器可以提供的所有資源。

即便如此，我仍然會展示這兩種方法的解決方案。

方案1：從 DOM 制作屏幕截圖

乍一看，這個解決方案似乎是最簡單的，事實(shí)證明的確是這樣，但它有其自身的局限性。如果你沒有特殊需求，例如在 PDF 中選擇文本或?qū)ξ谋具M(jìn)行搜索，那么這就是一種簡單易用的方法。

此方法簡單明了：從頁面創(chuàng)建屏幕截圖，并把它放到 PDF 文件中。非常直截了當(dāng)。我們可以使用兩個包來實(shí)現(xiàn)：

Html2canvas，根據(jù) DOM 生成截圖
jsPdf，一個生成PDF的庫

開始編碼：

npm install html2canvas jspdf

就這樣！

請注意 html2canvas 的 onclone方法。當(dāng)你在截圖之前需要操縱 DOM（例如隱藏打印按鈕）時，它是非常方便的。我看到過很多使用這個包的項目。但不幸的是，這不是我們想要的，因?yàn)槲覀冃枰诤蠖送瓿蓪?PDF 的創(chuàng)建工作。

方案2：只使用 PDF 庫

NPM上有幾個庫，如 jsPDF（如上所述）或PDFKit。他們的問題是，如果我想使用這些庫，我將不得不重新調(diào)整頁面結(jié)構(gòu)。這肯定會損害可維護(hù)性，因?yàn)槲倚枰獙⑺泻罄m(xù)更改應(yīng)用到 PDF 模板和 React 頁面中。

請看下面的代碼。你需要親自手動創(chuàng)建 PDF 文檔。你需要遍歷 DOM 并找出每個元素并將其轉(zhuǎn)換為 PDF 格式，這是一項繁瑣的工作。必須找到一個更簡單的方法。

這段代碼段來自 PDFKit 文檔。但是如果你的目標(biāo)是直接生成一個 PDF 文件，而不是對一個已經(jīng)存在的（并且不斷變化的）HTML 頁面進(jìn)行轉(zhuǎn)換，它還是很有用的。

最終方案3：基于 Node.js 的 Puppeteer 和 Headless Chrome

什么是 Puppeteer？其文檔中寫道：

Puppeteer 是一個 Node 庫，它提供了一個高級 API 來控制 DevTools 協(xié)議上的 Chrome 或 Chromium。 Puppeteer 默認(rèn)以 headless 模式運(yùn)行 Chrome 或 Chromium，但其也可以被配置為完整的（non-headless）模式運(yùn)行。

它本質(zhì)上是一個可以從 Node.js 運(yùn)行的瀏覽器。如果你讀過它的文檔，其中首先提到的就是你可以用 Puppeteer 來生成頁面的截圖和PDF。優(yōu)秀！這正是我們想要的。

先用 npmi i puppeteer 安裝 Puppeteer，并實(shí)現(xiàn)我們的功能。

這是一個簡單的功能，可導(dǎo)航到 URL 并生成站點(diǎn)的 PD F文件。

首先，我們啟動瀏覽器（僅在 headless 模式下支持 PDF 生成），然后打開新頁面，設(shè)置視口，并導(dǎo)航到提供的URL。

設(shè)置 waitUntil:'networkidle0' 選項意味著當(dāng)至少500毫秒沒有網(wǎng)絡(luò)連接時，Puppeteer 會認(rèn)為導(dǎo)航已完成。（可以從 API docs 獲取更多信息。）

之后，我們將 PDF 保存為變量，關(guān)閉瀏覽器并返回 PDF。

注意：page.pdf 方法接收 options 對象，你可以使用 'path' 選項將文件保存到磁盤。如果未提供路徑，則 PDF 將不會被保存到磁盤，而是會得到緩沖區(qū)。（稍后我將討論如何處理它。）

如果需要先登錄才能從受保護(hù)的頁面生成 PDF，首先你要導(dǎo)航到登錄頁面，檢查表單元素的 ID 或名稱，填寫它們，然后提交表單：

要始終將登錄憑據(jù)保存在環(huán)境變量中，不要硬編碼！

樣式控制

Puppeteer 也有這種樣式操作的解決方案。你可以在生成 PDF 之前插入樣式標(biāo)記，Puppeteer 將生成具有已修改樣式的文件。

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

將文件發(fā)送到客戶端并保存

好的，現(xiàn)在你已經(jīng)在后端生成了一個 PDF 文件。接下來做什么？

如上所述，如果你不把文件保存到磁盤，將會得到一個緩沖區(qū)。你只需要把含有適當(dāng)內(nèi)容類型的緩沖區(qū)發(fā)送到前端即可。

現(xiàn)在，你只需在瀏覽器向服務(wù)器發(fā)送請求即可得到生成的 PDF。

一旦發(fā)送了請求，緩沖區(qū)的內(nèi)容就應(yīng)該開始下載了。最后一步是將緩沖區(qū)數(shù)據(jù)轉(zhuǎn)換為 PDF 文件。

就這樣！如果單擊“保存”按鈕，那么瀏覽器將會保存 PDF。

在 Docker 中使用 Puppeteer

我認(rèn)為這是實(shí)施中最棘手的部分 —— 所以讓我?guī)湍愎?jié)省幾個小時的百度時間。

官方文檔指出*“在 Docker 中使用 headless Chrome 并使其運(yùn)行起來可能會非常棘手”*。官方文檔有疑難解答部分，你可以找到有關(guān)用 Docker 安裝 puppeteer 的所有必要信息。

如果你在 Alpine 鏡像上安裝 Puppeteer，請確保在看到頁面的這一部分時再向下滾動一點(diǎn)。否則你可能會忽略一個事實(shí)：你無法運(yùn)行最新的 Puppeteer 版本，并且你還需要用一個標(biāo)記禁用 shm ：

const browser=await puppeteer.launch({
 headless: true,
 args: ['--disable-dev-shm-usage']
});

否則，Puppeteer 子進(jìn)程可能會在正常啟動之前耗盡內(nèi)存。

方案 3 + 1：CSS 打印規(guī)則

可能有人認(rèn)為從開發(fā)人員的角度來看，簡單地使用 CSS 打印規(guī)則很容易。沒有 NPM 模塊，只有純 CSS。但是在跨瀏覽器兼容性方面，它的表現(xiàn)如何呢？

在選擇 CSS 打印規(guī)則時，你必須在每個瀏覽器中測試結(jié)果，以確保它提供的布局是相同的，并且它不是100％能做到這一點(diǎn)。

例如，在給定元素后面插入一個 break-after 并不是一個多么高深的技術(shù)，但是你可能會驚訝的發(fā)現(xiàn)要在 Firefox 中使用它需要使用變通方法。

除非你是一位經(jīng)驗(yàn)豐富的 CSS 大師，在創(chuàng)建可打印頁面方面有很多的經(jīng)驗(yàn)，否則這可能會非常耗時。

如果你可以使打印樣式表保持簡單，打印規(guī)則是很好用的。

讓我們來看一個例子吧。

@media print {
 .print-button {
 display: none;
 }
 
 .content div {
 break-after: always;
 }
}

上面的 CSS 隱藏了打印按鈕，并在每個 div 之后插入一個分頁符，其中包含content 類。有一篇很棒的文章總結(jié)了你可以用打印規(guī)則做什么，以及它們有什么問題，包括瀏覽器兼容性。

考慮到所有因素，如果你想從不那么復(fù)雜的頁面生成 PDF，CSS打印規(guī)則非常有效。

總結(jié)

讓我們快速回顧前面介紹的方案，以便從 HTML 頁面生成 PDF 文件：

從 DOM 產(chǎn)生截圖：當(dāng)你需要從頁面創(chuàng)建快照時（例如創(chuàng)建縮略圖）可能很有用，但是當(dāng)你需要處理大量數(shù)據(jù)時就會有些捉襟見肘。
只用 PDF 庫：如果你打算從頭開始以編程方式創(chuàng)建 PDF 文件，這是一個完美的解決方案。否則，你需要同時維護(hù) HTML 和 PDF 模板，這絕對是一個禁忌。
Puppeteer：盡管在 Docker 上工作相對困難，但它為我們的實(shí)現(xiàn)提供了最好的結(jié)果，而且編寫代碼也是最簡單的。
CSS打印規(guī)則：如果你的用戶受過足夠的教育，知道如何把頁面內(nèi)容打印到文件，并且你的頁面相對簡單，那么它可能是最輕松的解決方案。正如你在我們的案例中所看到的，事實(shí)并非如此。

雖然今天是愚人節(jié)，但是以上所有內(nèi)容都是在真的！

作者：瘋狂的技術(shù)宅

鏈接：https://juejin.im/post/5ca1dc0251882543d569e075

要使用的是wkhtmltopdf的Python封裝——pdfkit

安裝

1. Install python-pdfkit:

$ pip install pdfkit

2. Install wkhtmltopdf:

Debian/Ubuntu:

$ sudo apt-get install wkhtmltopdf

Redhat/CentOS

sudo yum intsall wkhtmltopdf

MacOS

brew install Caskroom/cask/wkhtmltopdf

使用

一個簡單的例子:

import pdfkit

pdfkit.from_url('http://google.com', 'out.pdf')

pdfkit.from_file('test.html', 'out.pdf')

pdfkit.from_string('Hello!', 'out.pdf')

你也可以傳遞一個url或者文件名列表:

pdfkit.from_url(['google.com', 'yandex.ru', 'engadget.com'], 'out.pdf')

pdfkit.from_file(['file1.html', 'file2.html'], 'out.pdf')

也可以傳遞一個打開的文件:

with open('file.html') as f:

pdfkit.from_file(f, 'out.pdf')

如果你想對生成的PDF作進(jìn)一步處理，你可以將其讀取到一個變量中:

# 設(shè)置輸出文件為False，將結(jié)果賦給一個變量

pdf=pdfkit.from_url('http://google.com', False)

你可以制定所有的 wkhtmltopdf 選項 http://wkhtmltopdf.org/usage/wkhtmltopdf.txt. 你可以移除選項名字前面的 '--' .如果選項沒有值, 使用None, False or * 作為字典值:

options={

'page-size': 'Letter',

'margin-top': '0.75in',

'margin-right': '0.75in',

'margin-bottom': '0.75in',

'margin-left': '0.75in',

'encoding': "UTF-8",

'no-outline': None

}

pdfkit.from_url('http://google.com', 'out.pdf', options=options)

默認(rèn)情況下, PDFKit 將會顯示所有的 wkhtmltopdf 輸出. 如果你不想看到這些信息，你需要傳遞一個 quiet 選項:

options={

'quiet': ''

}

pdfkit.from_url('google.com', 'out.pdf', options=options)

由于wkhtmltopdf的命令語法 , TOC 和 Cover 選項必須分開指定:

toc={

'xsl-style-sheet': 'toc.xsl'

}

cover='cover.html'

pdfkit.from_file('file.html', options=options, toc=toc, cover=cover)

當(dāng)你轉(zhuǎn)換文件、或字符串的時候，你可以通過css選項指定擴(kuò)展的 CSS 文件。

# 單個 CSS 文件

css='example.css'

pdfkit.from_file('file.html', options=options, css=css)

# Multiple CSS files

css=['example.css', 'example2.css']

pdfkit.from_file('file.html', options=options, css=css)

你也可以通過你的HTML中的meta tags傳遞任意選項：

body="""

<html>

<head>

</head>

Hello World!

</html>

"""

pdfkit.from_string(body, 'out.pdf') #with --page-size=Legal and --orientation=Landscape

配置

每個API調(diào)用都有一個可選的參數(shù)。這應(yīng)該是pdfkit.configuration()API 調(diào)用的一個實(shí)例. 采用configuration 選項作為初始化參數(shù)。可用的選項有:

wkhtmltopdf ——wkhtmltopdf二進(jìn)制文件所在的位置。默認(rèn)情況下pdfkit 會嘗試使用which (在類UNIX系統(tǒng)中) 或 where (在Windows系統(tǒng)中)來判斷
meta_tag_prefix -- pdfkit的前綴指定 meta tags（元標(biāo)簽） - 默認(rèn)情況是pdfkit-

示例：針對wkhtmltopdf不在系統(tǒng)路徑中（不在$PATH里面)

PATH里面）:

config=pdfkit.configuration(wkhtmltopdf='/opt/bin/wkhtmltopdf'))

pdfkit.from_string(html_string, output_file, configuration=config)

問題

IOError:'No wkhtmltopdf executable found':

確保 wkhtmltopdf 在你的系統(tǒng)路徑中（PATH），會通過 configuration進(jìn)行了配置 (詳情看上文描述)。在Windows系統(tǒng)中使用where wkhtmltopdf命令或在 linux系統(tǒng)中使用 which wkhtmltopdf 會返回 wkhtmltopdf二進(jìn)制可執(zhí)行文件所在的確切位置.

IOError: 'Command Failed'

如果出現(xiàn)這個錯誤意味著 PDFKit不能處理一個輸入。你可以嘗試直接在錯誤信息后面直接運(yùn)行一個命令來查看是什么導(dǎo)致了這個錯誤（某些版本的 wkhtmltopdf會因?yàn)槎五e誤導(dǎo)致處理失敗）

正常生成，但是出現(xiàn)中文亂碼

確保兩項：

1）、你的系統(tǒng)中有中文字體

2）、在html中加入

下面是我隨便寫的一個HTML表格：

<html>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<th align="left">tOTAL</th>

</tr>

</table>

</body>

</html>

下面是生成的PDF截圖

在線咨詢

上一篇：AI從截圖直接生成代碼、前端程序員的福利！
下一篇：前端開發(fā)：制作一個小滑塊有多難

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

網(wǎng)頁怎么打印成PDF文件？使用這款工具輕松實(shí)現(xiàn)

您的項目需求