一個用 JavaScript 產生 PDF 的函式庫。
您可以在 Twitter 上關注我:@MrRio 或造訪我公司的網站進行諮詢。
jsPDF 現在由圖表專家 yWorks 共同維護。
推薦:從 npm 取得 jsPDF:
npm install jspdf --save
# or
yarn add jspdf
或者,從 CDN 載入它:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >
或始終透過 unpkg 取得最新版本
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script >
該套件的dist
資料夾包含不同類型的檔案:
core-js
導入所有必需的 polyfill,而 umd 變體是獨立的。通常不需要在導入語句中指定確切的檔案。建置工具或 Node 自動找出正確的文件,因此導入“jspdf”就足夠了。
然後您就可以開始製作文件了:
import { jsPDF } from "jspdf" ;
// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
如果您想更改紙張尺寸、方向或單位,您可以執行以下操作:
// Landscape export, 2×4 inches
const doc = new jsPDF ( {
orientation : "landscape" ,
unit : "in" ,
format : [ 4 , 2 ]
} ) ;
doc . text ( "Hello world!" , 1 , 1 ) ;
doc . save ( "two-by-four.pdf" ) ;
const { jsPDF } = require ( "jspdf" ) ; // will automatically load the node version
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; // will save the file in the current working directory
require ( [ "jspdf" ] , ( { jsPDF } ) => {
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
} ) ;
const { jsPDF } = window . jspdf ;
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
jsPDF 的某些功能需要可選的相依性。例如html
方法,它依賴html2canvas
,並且當提供字串 HTML 文件時, dompurify
。 JsPDF 在需要時動態載入它們(使用相應的模組格式,例如動態導入)。像 Webpack 這樣的建置工具會自動為每個可選依賴項建立單獨的區塊。如果您的應用程式不使用任何可選依賴項,您可以透過將區塊定義為外部相依性來阻止 Webpack 產生區塊:
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ;
在Vue CLI專案中,可以透過vue.config.js
檔案的 configureWebpack 或 chainWebpack 屬性定義外部(需要先在新專案中建立)。
在Angular專案中,可以使用自訂 webpack 建構器來定義外部。
在React ( create-react-app
)專案中,可以透過使用react-app-rewired或彈出來定義外部。
jsPDF 可以像任何其他第三方函式庫一樣匯入。這適用於所有主要工具包和框架。 jsPDF 也為 TypeScript 專案提供打字檔。
import { jsPDF } from "jspdf" ;
您可以將 jsPDF 新增到您的meteor專案中,如下所示:
meteor add jspdf:core
jsPDF 需要現代瀏覽器 API 才能運作。在 Internet Explorer 等舊版瀏覽器中使用 jsPDF,需要使用 polyfill。您可以如下載入所有必需的 polyfill:
import "jspdf/dist/polyfills.es.js" ;
或者,您可以載入預先捆綁的 polyfill 檔案。不建議這樣做,因為您最終可能會多次加載 Polyfill。對於小型應用程式或快速 POC 來說可能仍然很實用。
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script >
PDF 中的 14 種標準字體僅限於 ASCII 代碼頁。如果您想使用 UTF-8,則必須整合自訂字體,它提供所需的字形。 jsPDF 支援 .ttf 檔案。因此,如果您想在 pdf 中包含中文文本,您的字體必須具有必要的中文字形。因此,請檢查您的字體是否支援所需的字形,否則它將顯示亂碼而不是正確的文字。
若要將字型新增至 jsPDF,請使用 /fontconverter/fontconverter.html 中的字型轉換器。 fontconverter 將建立一個 js 文件,其中包含提供的 ttf 文件的內容作為 base64 編碼字串和 jsPDF 的附加程式碼。您只需將此生成的 js 檔案添加到您的專案中即可。然後,您就可以在程式碼中使用 setFont-method 並編寫 UTF-8 編碼文字了。
或者,您可以使用fetch
或XMLHttpRequest
將 *.ttf 檔案的內容作為二進位字串加載,並將字體添加到 PDF 文件中:
const doc = new jsPDF ( ) ;
const myFont = ... // load the *.ttf font file as binary string
// add the font to jsPDF
doc . addFileToVFS ( "MyFont.ttf" , myFont ) ;
doc . addFont ( "MyFont.ttf" , "MyFont" , "normal" ) ;
doc . setFont ( "MyFont" ) ;
自從與 yWorks 分支合併以來,出現了許多新功能。然而,其中一些是 API 破壞,這就是為什麼在兩種 API 模式之間存在 API 切換:
您可以透過呼叫在兩種模式之間切換
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;
回呼運行後,JsPDF 會自動切換回原來的 API 模式。
請檢查您的問題是否已在 Stackoverflow https://stackoverflow.com/questions/tagged/jspdf 處理。請隨時使用標籤jspdf
提問。
功能請求、錯誤回報等都是非常受歡迎的問題。請注意,錯誤報告應遵循以下準則:
jsPDF 的生存離不開社區的幫助!如果您認為缺少某個功能或發現了錯誤,請考慮是否可以抽出一兩個小時來準備拉取請求。如果您只是對這個項目感興趣並想提供幫助,請查看未解決的問題,尤其是那些標有“bug”的問題。
您可以在貢獻指南中找到有關建置和測試 jsPDF 的信息
版權所有 (c) 2010-2021 James Hall,https://github.com/MrRio/jsPDF (c) 2015-2021 yWorks GmbH,https://www.yworks.com/
特此免費授予任何獲得本軟體和相關文件文件(「軟體」)副本的人不受限制地使用本軟體,包括但不限於使用、複製、修改、合併的權利、發布、分發、再授權和/或銷售軟體的副本,並允許向其提供軟體的人員這樣做,但須滿足以下條件:
上述版權聲明和本授權聲明應包含在本軟體的所有副本或主要部分中。
本軟體以「現況」提供,不提供任何明示或暗示的保證,包括但不限於適銷性、特定用途的適用性和不侵權的保證。 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE軟體.