和往常一樣，jsPDF是一個(gè)開(kāi)源的客戶端的PDF解決方案，在之前的文章中已經(jīng)介紹過(guò)幾個(gè)Web端和PDF相關(guān)的庫(kù)，jsPDF同樣是一個(gè)不錯(cuò)的客戶端PDF引 SDK，你可以通過(guò)jsPDF在客戶端完成相關(guān)操作，它包含了非常豐富的API，幫助你完成一系列的復(fù)雜操作！可以說(shuō)它是相當(dāng)領(lǐng)先的HTML5客戶端解決方案了！
Github
https://github.com/MrRio/jsPDF
Github star數(shù)17k+,可以說(shuō)相當(dāng)受歡迎了！
安裝使用
一般情況下我們會(huì)考慮使用包管理，常見(jiàn)的就是npm了，因此安裝非常簡(jiǎn)單
- npm install jspdf --save
或者也可以使用yarn
- yarn add jspdf
接下來(lái)就是制作你的文件的時(shí)候了
默認(rèn)導(dǎo)出為a4紙張，縱向，使用毫米表示單位
- var doc = new jsPDF()
- doc.text('Hello world!', 10, 10)
- doc.save('a4.pdf')
如果要更改紙張尺寸，方向或單位，可以執(zhí)行以下操作：
- var doc = new jsPDF({
- orientation: 'landscape',
- unit: 'in',
- format: [4, 2]
- })
- doc.text('Hello world!', 1, 1)
- doc.save('two-by-four.pdf')
使用UTF-8 / TTF
PDF中的14種標(biāo)準(zhǔn)字體僅限于ASCII代碼頁(yè)。如果要使用UTF-8，則必須集成自定義字體，該字體提供所需的字形。jsPDF支持.ttf文件。因此，如果你希望在pdf中使用中文文本，則您的字體必須具有必要的中文字形。因此，請(qǐng)檢查您的字體是否支持所需的字形，否則它將顯示空白而不是文本。
要將字體添加到j(luò)sPDF，在/fontconverter/fontconverter.html中使用官網(wǎng)提供的fontconverter。fontconverter將創(chuàng)建一個(gè)js文件，其中包含提供的ttf文件的內(nèi)容作為base64編碼的字符串和jsPDF的附加代碼。你只需將生成的js-File添加到項(xiàng)目中即可。然后，就可以在代碼中使用setFont-method并編寫(xiě)UTF-8編碼文本。
Angular/Webpack/React等配置
常規(guī)操作
- import * as jsPDF from 'jspdf'
有些框架，必須像下面這樣
- import jsPDF from 'jspdf';
API
jsPDF的api非常豐富，在這里就不提供相關(guān)地址了，在Github必然找的到，本文重點(diǎn)不在于介紹jsPDF的用法，將部分API截圖展示，通過(guò)名稱大致能猜到一些意思，具體用法需要參考官網(wǎng)文檔：
從截圖來(lái)看，其文檔特別的詳細(xì)，具體到每一個(gè)API在js文件的行數(shù)，便于閱讀源代碼，包括參數(shù)以及返回值都非常明確：
在線DEMO
官方提供了一個(gè)在線demo，可以直接運(yùn)行代碼，感興趣的可以先嘗試一下：
總結(jié)
jsPDF是筆者見(jiàn)過(guò)類似產(chǎn)品中較為突出的，幾乎涵蓋了所有PDF相關(guān)操作，非常詳細(xì)的文檔也讓開(kāi)發(fā)者，輕松上手，在線demo還能快速學(xué)習(xí)，如果你的項(xiàng)目對(duì)PDF的操作比較多，不妨嘗試下jsPDF，唯一需要注意的就是解決字體問(wèn)題，但是上文也提到過(guò)解決方案，感興趣的可以進(jìn)行體驗(yàn)！
