和往常一樣,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,唯一需要注意的就是解決字體問題,但是上文也提到過解決方案,感興趣的可以進行體驗!