介紹
和往常一樣,jsPDF是一個開源的客戶端的PDF解決方案,在之前的文章中已經介紹過幾個Web端和PDF相關的庫,jsPDF同樣是一個不錯的客戶端PDF引 SDK,你可以通過jsPDF在客戶端完成相關操作,它包含了非常豐富的API,幫助你完成一系列的複雜操作!可以說它是相當領先的HTML5客戶端解決方案了!
Github
https://github.com/MrRio/jsPDF
Github star數17k+,可以說相當受歡迎了!
安裝使用
一般情況下我們會考慮使用包管理,常見的就是npm了,因此安裝非常簡單
npm install jspdf --save
或者也可以使用yarn
yarn add jspdf
接下來就是製作你的文件的時候了
默認導出為a4紙張,縱向,使用毫米表示單位
var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')
如果要更改紙張尺寸,方向或單位,可以執行以下操作:
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種標準字體僅限於ASCII代碼頁。如果要使用UTF-8,則必須集成自定義字體,該字體提供所需的字形。jsPDF支持.ttf文件。因此,如果你希望在pdf中使用中文文本,則您的字體必須具有必要的中文字形。因此,請檢查您的字體是否支持所需的字形,否則它將顯示空白而不是文本。
要將字體添加到jsPDF,在/fontconverter/fontconverter.html中使用官網提供的fontconverter。fontconverter將創建一個js文件,其中包含提供的ttf文件的內容作為base64編碼的字符串和jsPDF的附加代碼。你只需將生成的js-File添加到項目中即可。然後,就可以在代碼中使用setFont-method並編寫UTF-8編碼文本。
Angular/Webpack/React等配置
常規操作
import * as jsPDF from 'jspdf'
有些框架,必須像下面這樣
import jsPDF from 'jspdf';
API
jsPDF的api非常豐富,在這裡就不提供相關地址了,在Github必然找的到,本文重點不在於介紹jsPDF的用法,將部分API截圖展示,通過名稱大致能猜到一些意思,具體用法需要參考官網文檔:
從截圖來看,其文檔特別的詳細,具體到每一個API在js文件的行數,便於閱讀原始碼,包括參數以及返回值都非常明確:
在線DEMO
官方提供了一個在線demo,可以直接運行代碼,感興趣的可以先嘗試一下:
總結
jsPDF是筆者見過類似產品中較為突出的,幾乎涵蓋了所有PDF相關操作,非常詳細的文檔也讓開發者,輕鬆上手,在線demo還能快速學習,如果你的項目對PDF的操作比較多,不妨嘗試下jsPDF,唯一需要注意的就是解決字體問題,但是上文也提到過解決方案,感興趣的可以進行體驗!