jsPDF：客戶端PDF生成利器，精細(xì)控制頁面元素

核心要點(diǎn)：

• jsPDF是一個(gè)JavaScript庫(kù)，允許直接在客戶端生成PDF文件，從而加快處理速度。它特別適用于精確控制文檔中元素的位置、大小以及分頁。
• jsPDF庫(kù)易于用于基本的PDF文件生成，但由于文檔有限，對(duì)于復(fù)雜的項(xiàng)目可能會(huì)更具挑戰(zhàn)性。然而，它提供了向PDF添加文本、圖像和形狀的功能，并可精確控制位置和大小。
• jsPDF庫(kù)可以使用其API進(jìn)行擴(kuò)展?？梢蕴砑又T如textAlign()之類的函數(shù)，并使用setFontSize()、setFont()、setTextColor()和setFontType()方法更改文本屬性。
• jsPDF還允許創(chuàng)建多頁P(yáng)DF，使用“autoTable”插件添加表格以及包含超鏈接。但是，由于瀏覽器安全限制，用戶無法指定生成的PDF的特定保存位置。

便攜式文檔格式（PDF）是桌面出版和辦公自動(dòng)化領(lǐng)域的一項(xiàng)重大創(chuàng)新。

它也廣泛用于網(wǎng)絡(luò)出版，但不幸的是，很多時(shí)候使用方法不當(dāng)——例如用它來替換本應(yīng)使用HTML構(gòu)建的內(nèi)容。這會(huì)導(dǎo)致許多關(guān)于可用性、可訪問性、SEO等方面的問題。

但是，在某些情況下需要PDF文件：當(dāng)需要存檔文檔并且必須在網(wǎng)絡(luò)外部使用（例如發(fā)票）時(shí)，或者當(dāng)需要對(duì)打印進(jìn)行深度控制時(shí)。

正是對(duì)打印控制的需求促使我去研究一種輕松生成PDF的方法。

本文的目的不僅僅是簡(jiǎn)單地解釋如何創(chuàng)建PDF（有很多簡(jiǎn)單的方法可以做到這一點(diǎn)），而且還要關(guān)注PDF文件可以解決問題的情況，以及像jsPDF這樣的簡(jiǎn)單工具如何提供幫助。

打印處理

任何處理過CSS打印規(guī)則的人都了解實(shí)現(xiàn)體面的跨瀏覽器兼容性有多么困難（例如，查看Can I Use中的分頁符支持表）。因此，當(dāng)我需要構(gòu)建必須打印的內(nèi)容時(shí)，我總是嘗試避免使用CSS，最簡(jiǎn)單的解決方案是使用PDF。

我這里說的不是簡(jiǎn)單的HTML到PDF轉(zhuǎn)換。（我嘗試過幾種此類工具，但沒有一個(gè)完全令我滿意。）我的目標(biāo)是完全控制元素的位置和大小、分頁符等等。

過去，我經(jīng)常使用FPDF，這是一個(gè)PHP工具，可以輕松地為您提供這種控制，并且可以輕松地使用許多插件進(jìn)行擴(kuò)展。

不幸的是，該庫(kù)似乎已被放棄（其最后一個(gè)版本可以追溯到2011年）（更新：實(shí)際上，最新版本似乎是2015年12月發(fā)布的），但由于一些JavaScript庫(kù)，我們現(xiàn)在可以直接在客戶端構(gòu)建PDF文件（從而使它們的生成速度更快）。

幾個(gè)月前，當(dāng)我開始我的項(xiàng)目時(shí)，我搜索了一個(gè)JS庫(kù)，最終我找到了兩個(gè)候選者：jsPDF和pdfmake。pdfmake似乎文檔齊全且易于使用，但由于它是測(cè)試版，所以我選擇了jsPDF。

使用jsPDF構(gòu)建PDF

jsPDF文檔相當(dāng)簡(jiǎn)短，包括一個(gè)頁面以及一些演示，以及源文件（或其jsDoc頁面）中更多信息，因此請(qǐng)記住，將其用于復(fù)雜項(xiàng)目一開始可能會(huì)有點(diǎn)困難。

無論如何，jsPDF對(duì)于基本的PDF文件生成非常容易。讓我們來看一個(gè)簡(jiǎn)單的“Hello World”示例：

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

此HTML頁面生成一個(gè)單頁P(yáng)DF文件并將其保存到您的計(jì)算機(jī)上。首先，您必須鏈接到j(luò)sPDF庫(kù)（在本例中，來自cdnjs.com），然后創(chuàng)建一個(gè)jsPDF實(shí)例，添加一行文本，并將結(jié)果保存為hello_world.pdf。

請(qǐng)注意，我使用了1.0.272版本，它不是最新的：在撰寫本文時(shí)，最新版本是1.1.135，但它有很多問題，所以我仍在使用之前的版本。

您可以看到構(gòu)建基本PDF文件是多么簡(jiǎn)單（您可以在jsPDF網(wǎng)站上找到更多示例）。

讓我們嘗試構(gòu)建更復(fù)雜的內(nèi)容。

傳單項(xiàng)目

幾個(gè)月前，有人要求我構(gòu)建一個(gè)用于創(chuàng)建一些簡(jiǎn)單傳單的應(yīng)用程序。它是處理旅行社服務(wù)的更大項(xiàng)目的一部分，真正的傳單部分由一些JSON數(shù)據(jù)填充。

傳單的主要目的是提供一種簡(jiǎn)單的方法來顯示要在旅行社商店櫥窗中展示的特價(jià)優(yōu)惠。

我已經(jīng)為本文重新安排了該應(yīng)用程序，刪除了所有服務(wù)器端功能，簡(jiǎn)化了傳單設(shè)計(jì)，擺脫了舊版瀏覽器兼容性，并使用Bootstrap 3和jQuery構(gòu)建了一個(gè)非常簡(jiǎn)單的UI。

該演示與Firefox和Chrome配合良好，而Explorer（或Edge）不允許您顯示預(yù)覽，而只能下載生成的PDF。

這是一個(gè)使用該應(yīng)用程序創(chuàng)建的PDF示例（照片來源：Rafael Le?o / Unsplash）

可以在本文結(jié)尾或直接在CodePen中找到一個(gè)可運(yùn)行的演示。請(qǐng)注意，由于CodePen在iframe中加載結(jié)果頁面，因此在iframe中加載的PDF預(yù)覽在Chrome和Safari中存在一些問題，阻止了預(yù)覽的顯示。（如果可以，請(qǐng)使用Firefox，或者在我的個(gè)人網(wǎng)站上嘗試演示）。

傳單構(gòu)建器

用戶界面允許用戶插入一些基本數(shù)據(jù)（標(biāo)題、摘要和價(jià)格）?？梢赃x擇添加圖像，否則將顯示灰框的“特價(jià)優(yōu)惠”標(biāo)題。

其他數(shù)據(jù)（代理名稱及其網(wǎng)站URL和徽標(biāo)）嵌入到應(yīng)用程序代碼中。

PDF可以在iframe中預(yù)覽（除了Explorer或Edge）或直接下載。

當(dāng)單擊“更新預(yù)覽”或“下載”按鈕時(shí)，將使用jsPDF生成PDF，并將其作為data URI字符串傳遞到iframe或保存到磁盤，如上例所示。

PDF生成首先使用以下選項(xiàng)創(chuàng)建一個(gè)新的jsPDF對(duì)象實(shí)例：縱向方向（p）、毫米單位（mm）、“A4”格式。

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

使用addImage函數(shù)添加圖像。請(qǐng)注意，放置在PDF頁面中的每個(gè)對(duì)象都必須精確定位。您必須使用聲明的單位來處理每個(gè)對(duì)象坐標(biāo)。

var pdf = new jsPDF('p', 'mm', 'a4');

圖像必須進(jìn)行Base64編碼：代理徽標(biāo)以這種格式嵌入到腳本中，而用戶加載的圖像則使用$('#flyer-image').change偵聽器中的readAsDataURL方法進(jìn)行編碼。

標(biāo)題使用textAlign函數(shù)添加。請(qǐng)注意，此函數(shù)不是jsPDF核心的組成部分，但是，正如作者在他的示例中建議的那樣，可以使用其API輕松擴(kuò)展該庫(kù)。您可以在傳單構(gòu)建器腳本的頂部找到textAlign()函數(shù)：

// pdf.addImage(base64_source, image format, X, Y, width, height)
pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);

此函數(shù)計(jì)算文本字符串的X坐標(biāo)以使其居中，然后調(diào)用本機(jī)text()方法：

pdf.textAlign(flyer_title, {align: "center"}, 0, _y);

要更改文本屬性，可以使用setFontSize()、setFont()、setTextColor()和setFontType()方法。

例如，要設(shè)置一個(gè)20pt Times Bold紅色字符串，您需要鍵入以下內(nèi)容：

pdf.text(text string, X, Y);

“特價(jià)優(yōu)惠”灰色框和價(jià)格圓圈使用兩種類似的方法：roundedRect()和circle()。兩者都需要左上角坐標(biāo)、大小值（第一種情況下的寬度和高度以及第二種情況下的半徑）：

pdf.setFontSize(20);
pdf.setFont("times");
pdf.setFontType("bold");
pdf.setTextColor(255, 0, 0);
pdf.text(10,10, 'This is a 20pt Times Bold red string');

style參數(shù)指的是對(duì)象的填充和描邊屬性。有效的樣式包括：S [默認(rèn)] 表示描邊，F(xiàn) 表示填充，DF（或FD）表示填充和描邊。

填充和描邊屬性必須使用setFillColor和setDrawColor預(yù)先設(shè)置，它們需要RGB值和setLineWidth，后者需要在PDF文檔創(chuàng)建之初聲明的單位中的線寬值。

完整的代碼可在CodePen演示中找到：

(此處應(yīng)插入CodePen鏈接，由于我無法訪問外部網(wǎng)站，無法提供)

結(jié)論

這個(gè)基本示例展示了如何使用jsPDF構(gòu)建非?；镜膫鲉?。

它的使用可能很簡(jiǎn)單，但是缺乏完整的文檔使每一步都非常復(fù)雜。

我仍在尋找其他解決方案，關(guān)注pdfmake等其他解決方案。但最終，我認(rèn)為唯一真正明確的解決方案是更好地支持打印CSS規(guī)則的瀏覽器！

(此處應(yīng)包含F(xiàn)AQ部分，內(nèi)容與原文相同，但格式可根據(jù)需要調(diào)整)

以上是使用JSPDF即時(shí)從網(wǎng)頁??生成PDF的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！