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

　　jsPDF 是一個基於 HTML5 的客戶端解決方案，用於生成各種用途的 PDF 文檔。使用方法很簡單，只要引入 jsPDF 庫，然后調用內置的方法就可以了。瀏覽器兼容性： IE 10, Firefox 3+, Chrome, Safari 3+, Opera，未來將兼容 IE 10 以下版本，對於 IE10 以下的版本會使用 Downloadify 來實現文件下載功能。

您可能感興趣的相關文章

• 推薦十個擁有豐富 UI 組件的 JavaScript 開發框架
• jQuery Wheel Menu：漂亮的 Path 風格旋轉菜單
• SlimerJS – Web開發人員可編寫 JS 控制的瀏覽器
• Chance – 功能強大的 JavaScript 隨機數生成類庫
• 精心挑選的12款優秀 jQuery Ajax 分頁插件和教程

 

 

插件下載      效果演示

 

使用示例

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
});

 

您可能感興趣的相關文章

• Manifesto – HTML5 離線應用程序緩存校驗工具
• Popline：很特別的浮動 HTML5 文本編輯器工具欄
• Bootstrap 3.0 正式發布，更好地支持移動端開發
• jQuery Flat Shadow – 輕松實現漂亮的長陰影效果
• Superhero：構建大型 JavaScript 應用程序的資源

 

本文鏈接：贊！jsPDF – 基於 HTML5 的強大 PDF 生成工具

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源