jsPDF – 基於 HTML5 的強大 PDF 生成工具

原創

阳光岛主

2020-02-21 09:39

jsPDF 是一個基於 HTML5 的客戶端解決方案，用於生成各種用途的 PDF 文檔。

使用方法很簡單，只要引入 jsPDF 庫，然後調用內置的方法就可以了。

米撲科技項目用到了HHTML5生成PDF，原文詳見米撲博客：

jsPDF – 基於 HTML5 的強大 PDF 生成工具

瀏覽器兼容性：

IE 10, Firefox 3+, Chrome, Safari 3+, Opera，未來將兼容 IE 10 以下版本，對於 IE10 以下的版本會使用 Downloadify 來實現文件下載功能。

支持文件格式：

文本，數字，圖形，圖片，同時你可以自由的編輯標題或者其它類型元素。

曾經生成PDF都是服務器端代碼的專利，在今天的這篇文章中，我們將介紹一個JavaScript類庫 - jsPDF，使用它能夠幫助你使用前端腳本生成PDF文件，是不是很棒，試試吧！

支持互動的內容製作，例如，你可以輸入文字或者數字，然後jsPDF幫助生成最後的PDF內容。

支持現代瀏覽器，如果是老式瀏覽器的話，可以很好的使用flash來實現兼容。不過貌似支持Firefox不是很好，如果要查看演示，使用Chrome吧！

官網地址：http://jspdf.com https://parall.ax/products/jspdf

下載地址：https://github.com/MrRio/jsPDF

jquery生成pdf插件jsPDF

示例網址： http://www.jq22.com/jquery-info517

示例演示： http://www.jq22.com/yanshi517

在客戶端JavaScript生成PDF文件。

創建您的第一個文檔

看examples/basic.html例子。

var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');

使用示例

1、文本

var doc = new jsPDF();
  
doc.text(20, 20, 'This is the default font.');
  
doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'This is courier normal.');
  
doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, 'This is times italic.');
  
doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, 'This is helvetica bold.');
  
doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 60, 'This is courier bolditalic.');

2、圖片

// You'll need to make your image into a Data URL
// Use http://dataurl.net/#dataurlmaker
var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4ge....../2Q==';
  
var doc = new jsPDF();
  
doc.setFontSize(40);
doc.text(35, 25, "Octonyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);

3、HTML

var doc = new jsPDF();
  
// We'll make our own renderer to skip this editor
var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};
  
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.fromHTML($('#render_me').get(0), 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
});