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

核心要點：

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

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

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

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

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

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

打印處理

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

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

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

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

幾個月前，當我開始我的項目時，我搜索了一個JS庫，最終我找到了兩個候選者：jsPDF和pdfmake。pdfmake似乎文檔齊全且易于使用，但由于它是測試版，所以我選擇了jsPDF。

使用jsPDF構(gòu)建PDF

jsPDF文檔相當簡短，包括一個頁面以及一些演示，以及源文件（或其jsDoc頁面）中更多信息，因此請記住，將其用于復雜項目一開始可能會有點困難。

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

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

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

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

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

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

傳單項目

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

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

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

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

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

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

傳單構(gòu)建器

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

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

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

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

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

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

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

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

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

標題使用textAlign函數(shù)添加。請注意，此函數(shù)不是jsPDF核心的組成部分，但是，正如作者在他的示例中建議的那樣，可以使用其API輕松擴展該庫。您可以在傳單構(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ù)計算文本字符串的X坐標以使其居中，然后調(diào)用本機text()方法：

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

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

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

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

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

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ù)指的是對象的填充和描邊屬性。有效的樣式包括：S [默認] 表示描邊，F(xiàn) 表示填充，DF（或FD）表示填充和描邊。

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

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

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

結(jié)論

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

它的使用可能很簡單，但是缺乏完整的文檔使每一步都非常復雜。

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

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

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