摘要：在本文中，將探討如何從一個(gè)應(yīng)用程序中直接生成一個(gè)。然而，再次受到瀏覽器對(duì)和支持的限制。使用來(lái)實(shí)現(xiàn)規(guī)范嘗試使用實(shí)現(xiàn)規(guī)范實(shí)際上是創(chuàng)建了。就從應(yīng)用程序使用這些工具而言，需要在服務(wù)器上安裝它們。希望這是一個(gè)有用的工具總結(jié)，可用幫你的應(yīng)用程序創(chuàng)建。

為了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

在一些場(chǎng)景下，用戶都要求一些需要的數(shù)據(jù)能以 pdf 的格式下載下來(lái)。如電子商務(wù)商店，經(jīng)常需要一些報(bào)表數(shù)據(jù)來(lái)分析當(dāng)月的銷售情況。

在本文中，將探討如何從一個(gè)web應(yīng)用程序中直接生成一個(gè)PDF。這不是一個(gè)生成 PDF 庫(kù)列表，這里主要的目的是展示不同生成 PDF 的方法。如果你有自己喜歡的工具或任何經(jīng)驗(yàn)可以在評(píng)論中分享給我們。

首先考慮如何使用HTML和CSS生成PDF版本。

CSS確實(shí)有一個(gè)處理打印CSS的規(guī)范，就是 Paged Media module。之前的文章《用CSS設(shè)計(jì)打印格式》中概述了這個(gè)規(guī)范，許多圖書出版商在他們所有的打印輸出中都使用了CSS。因此，CSS本身就有打印材料的規(guī)格，我們當(dāng)然應(yīng)該能夠使用它？

用戶生成PDF的最簡(jiǎn)單方法是直接通過(guò)的瀏覽器，選擇打印 PDF，將生成一個(gè)PDF。可悲的是，這個(gè)PDF通常并不完全令人滿意！首先，它會(huì)有頁(yè)眉和頁(yè)腳，當(dāng)你從網(wǎng)頁(yè)打印內(nèi)容時(shí)，這些頁(yè)眉和頁(yè)腳會(huì)自動(dòng)添加。當(dāng)然如果你有一個(gè)樣式表，它也會(huì)根據(jù)打印樣式表進(jìn)行格式化。

用瀏覽器直接打印的一個(gè)問(wèn)題是瀏覽器對(duì)片斷規(guī)范(fragmentation )的支持不足。這可能意味著你的頁(yè)面內(nèi)容以不同尋常的方式中斷。這說(shuō)明你可能無(wú)法防止內(nèi)容的次優(yōu)中斷，如標(biāo)題將作為頁(yè)面上的最后一項(xiàng)保留，依此類推。

此外，我們無(wú)法控制頁(yè)邊距框中的內(nèi)容，例如 將我們選擇的標(biāo)題添加到每個(gè)頁(yè)面或頁(yè)碼編號(hào)，以顯示頁(yè)數(shù)。 這些內(nèi)容是Paged Media規(guī)范的一部分，但尚未在任何瀏覽器中實(shí)現(xiàn)。

還有一些方法可以使用瀏覽器渲染引擎將文檔打印成PDF，而不需要在瀏覽器中使用打印的菜單，并且以頁(yè)眉和頁(yè)腳結(jié)束。在我之前的的推文時(shí)，最受歡迎的選項(xiàng)是wkhtmltopdf，以及使用無(wú)頭Chrome和Puppeteer打印。

wkhtmltopdf

接受HTML文件或多個(gè)文件，以及樣式表，并將其轉(zhuǎn)換為PDF。它通過(guò)使用WebKit渲染引擎來(lái)實(shí)現(xiàn)這一點(diǎn)。

因此，從本質(zhì)上講，這個(gè)工具與與瀏覽器打印效果是一樣的，但是，不會(huì)得到自動(dòng)添加的頁(yè)眉和頁(yè)腳。從樂(lè)觀上講，如果你有一個(gè)可用于內(nèi)容的打印樣式表，那么可以使用這個(gè)工具很好地打印PDF，因此一個(gè)簡(jiǎn)單的布局可能打印得更好。

然而，不幸的是，由于不支持分頁(yè)媒體規(guī)范和片段(fragmentation)屬性，仍然會(huì)遇到與直接從web瀏覽器打印相同的問(wèn)題，因?yàn)槿匀皇褂玫氖菫g覽器渲染引擎進(jìn)行打印。

可以將一些標(biāo)志傳遞到wkhtmltopdf中，以便使用分頁(yè)媒體規(guī)范在缺省情況下添加一些缺失的特性。然而，這確實(shí)需要一些額外的工作，除了寫好的 HTML 和CSS。

另一種是使用無(wú)頭的谷歌瀏覽器來(lái)打印 PDF。

然而，再次受到瀏覽器對(duì) Paged Media 和 fragmentation 支持的限制。有一些選項(xiàng)可以傳遞到page.pdf()函數(shù)中。與wkhtmltopdf一樣，如果有瀏覽器支持，添加了一些CSS 提供的功能。

很可能這些解決方案中的一個(gè)可以滿足你的所有需求，但是，如果發(fā)現(xiàn)你正在進(jìn)行某種程度的任務(wù)，很可能已經(jīng)達(dá)到了當(dāng)前瀏覽器渲染引擎的極限，這就需要尋找更好的解決方案。

嘗試使用JavaScript 實(shí)現(xiàn)Paged Media規(guī)范 - 實(shí)際上是創(chuàng)建了 Paged Media Polyfill。 也可以在使用 Puppeteer 提供對(duì) Paged Media支持。 看看 paged.js和 Vivliostyle。

如果你想繼續(xù)使用 HTML 和 CSS 解決方案，那么你需要查看用于從 HTML 和 CSS 打印的用戶代理（UA），其中包含用于從文件生成 PDF 的 API。 這些用戶代理實(shí)現(xiàn)了Paged Media規(guī)范，并且對(duì) CSS Fragmentation屬性有了更好的支持;，這樣可以更好地控制輸出： 主要選擇包括：

Prince

Antenna House

PDFReactor

打印UA將像web瀏覽器一樣使用CSS格式化文檔。與瀏覽器支持CSS一樣，需要查看這些UA的的文檔，以了解它們支持什么。例如，Prince 在編寫本文時(shí)支持Flexbox，但不支持CSS網(wǎng)格布局。當(dāng)將頁(yè)面發(fā)送到正在使用的工具時(shí)，通常會(huì)使用一個(gè)用于打印的特定樣式表。與常規(guī)打印樣式表一樣，我在站點(diǎn)上使用的CSS并不都適合PDF版本。

為這些工具創(chuàng)建樣式表與創(chuàng)建常規(guī)打印樣式表非常相似，可能使用不同的字體大小或顏色來(lái)決定顯示或隱藏什么。然后，可以利用分頁(yè)媒體規(guī)范（ Paged Media specification）中的功能，添加腳注、頁(yè)碼等。

就從web應(yīng)用程序使用這些工具而言，需要在服務(wù)器上安裝它們。這些工具的主要問(wèn)題是它們很昂貴。也就是說(shuō)，考慮到你可以輕松地使用它們生成打印文檔，它們可能會(huì)在節(jié)省的開發(fā)人員時(shí)間中得到很好的回報(bào)。

可以通過(guò)API(按文檔付費(fèi))通過(guò)DocRaptor服務(wù)使用Prince。對(duì)于許多應(yīng)用程序來(lái)說(shuō)，這無(wú)疑是一個(gè)很好的起點(diǎn)，因?yàn)樗雌饋?lái)似乎可以使你自己的主機(jī)變得更加經(jīng)濟(jì)有效，而切換的開發(fā)成本將是最小的。

一個(gè)免費(fèi)的替代方案是WeasyPrint，它不像上面的工具那么全面，但很有可能已經(jīng)滿足你的需求。它沒有完全實(shí)現(xiàn)所有分頁(yè)媒體規(guī)范，但是，它實(shí)現(xiàn)的比瀏覽器引擎更多。當(dāng)然，你可以試試！

聲稱支持從HTML和CSS轉(zhuǎn)換的其他工具包括PDFCrowd，它大膽聲稱支持HTML5，CSS3和JavaScript。 但是，我無(wú)法找到關(guān)于支持的確切內(nèi)容的任何細(xì)節(jié)，以及是否有任何分布媒體規(guī)范。

還有許多其他的解決方案，它們不再使用HTML和CSS，而是要求你為工具創(chuàng)建特定的輸出。下面是對(duì)應(yīng)的工具：

jsPDF

pdfmake

除了基于javascript的方法(它要求打印內(nèi)容創(chuàng)建完全不同的表示形式)之外，這些解決方案的優(yōu)點(diǎn)在于它們是可互換的。如果你的解決方案基于調(diào)用命令行工具，并將該工具傳遞給你的HTML、CSS，可能還傳遞一些JavaScript，那么在工具之間切換是相當(dāng)簡(jiǎn)單的。

為了支持分布媒體和fragmentation，Prince，Antenna House 和 PDFReactor可以作為首選。 作為商業(yè)產(chǎn)品，他們也得到了支持。

但是，在許多情況下，免費(fèi)工具也很適合。 如果你的的需求非常簡(jiǎn)單，那么wkhtmltopdf，或者基本的無(wú)頭Chrome 和 Puppeteer就可以解決問(wèn)題。

但是，如果你發(fā)現(xiàn)打印的結(jié)果不是自己想要的，請(qǐng)注意這可能是瀏覽器打印的限制，而不是你做錯(cuò)了什么。如果你想要更多的頁(yè)面媒體支持，但又無(wú)法獲得商業(yè)產(chǎn)品，也許可以看看WeasyPrint。

希望這是一個(gè)有用的工具總結(jié)，可用幫你的web應(yīng)用程序創(chuàng)建pdf。

wkhtmltopdf

paged.js

Vivliostyle

Prince

Antenna House

PDFReactor

DocRaptor

WeasyPrint

PDFCrowd

mPDF

jsPDF

pdfmake

Produce & Publish Server

干貨系列文章匯總?cè)缦?，覺得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。