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

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

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

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

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

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

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

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

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

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

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

wkhtmltopdf

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

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

然而，不幸的是，由于不支持分頁媒體規(guī)范和片段(fragmentation)屬性，仍然會遇到與直接從web瀏覽器打印相同的問題，因為仍然使用的是瀏覽器渲染引擎進行打印。

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

另一種是使用無頭的谷歌瀏覽器來打印 PDF。

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

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

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

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

Prince

Antenna House

PDFReactor

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

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

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

可以通過API(按文檔付費)通過DocRaptor服務使用Prince。對于許多應用程序來說，這無疑是一個很好的起點，因為它看起來似乎可以使你自己的主機變得更加經(jīng)濟有效，而切換的開發(fā)成本將是最小的。

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

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

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

jsPDF

pdfmake

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

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

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

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

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

wkhtmltopdf

paged.js

Vivliostyle

Prince

Antenna House

PDFReactor

DocRaptor

WeasyPrint

PDFCrowd

mPDF

jsPDF

pdfmake

Produce & Publish Server

干貨系列文章匯總?cè)缦拢X得不錯點個Star，歡迎 加群 互相學習。

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

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

關(guān)注公眾號，后臺回復福利，即可看到福利，你懂的。