使用javascript生成PDF的类库 – jsPDF

使用javascript生成PDF的类库 – jsPDF

• 博客分类： 
• js PDF

js PDF

 

曾经生成PDF都是服务器端代码的专利，在今天的这篇文章中，我们将介绍一个javascript类库 - jsPDF，使用它能够帮助你使用前端脚本生成PDF文件，是不是很棒，试试吧！

 

jsPDF支持不同类型的PDF文件格式，包括：文本，数字，图形，图片，同时你可以自由的编辑标题或者其它类型元素。

支持互动的内容制作，例如，你可以输入文字或者数字，然后jsPDF帮助生成最后的PDF内容。

支持现代浏览器，如果是老式浏览器的话，可以很好的使用flash来实现兼容。不过貌似支持Firefox不是很好，如果要查看演示，使用Chrome吧！

官网地址：http://jspdf.com/

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

下面做几个简单的demo

Html代码  

1. <script type="text/javascript" src="jspdf.min.js"></script>  

 并不需要依赖库，只要引入jspdf.js(或压缩的jspdf.min.js)即可。

 

demo1：生成简单的文本

Html代码

Html代码  

1. <a href="javascript:void(0)" onclick="createAndOutput()">生成并输出</a>  
2. <br/>  
3. <a href="javascript:void(0)" onclick="createAndDownload()">生成并下载</a>  

 Js代码

Js代码  

1. <script type="text/javascript">  
2. //生成并输出  
3. function createAndOutput(){  
4.    var doc = new jsPDF();  
5.    doc.text(20, 20, 'Hello world!');  
6.    doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');  
7.    doc.addPage(); //生成下一页  
8.    doc.text(20, 20, 'Do you like that?');  
9.   
10.    doc.output('datauri');  
11. }  
12.   
13. //生成并下载  
14. function createAndDownload(){  
15.    var doc = new jsPDF();  
16.    doc.text(20, 20, 'Hello world!');  
17.    doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');  
18.    doc.addPage(); //生成下一页  
19.    doc.text(20, 20, 'Do you like that?');  
20.      
21.    doc.save('Test.pdf');  
22. }  
23. </script>  

 demo2生成图片

Html代码

Html代码  

1. <a href="javascript:void(0)" onclick="createAndDownload()">生成并下载</a>  

 Js代码

Js代码  

1. <script type="text/javascript">  
2.   
3. //生成并下载  
4. function createAndDownload(){  
5.    var doc = new jsPDF();  
6.   
7.    doc.setFontSize(40);  
8.    doc.text(35, 25, "jsPDF image demo");  
9.      
10.    var imgAsDataURL = createDateUrl();  
11.    doc.addImage(imgAsDataURL, 'JPEG', 15, 40, 180, 180);  
12.      
13.    doc.save('Test.pdf');  
14. }  
15.   
16. //利用html5的画布功能生成简单的矩形  
17. function createDateUrl(){  
18.         var imgCanvas = document.createElement("canvas");  
19.         if (imgCanvas.getContext) {  
20.             alert("您的浏览器支持 canvas 标签");  
21.         } else {  
22.             alert("您的浏览器不支持 canvas 标签");  
23.         }  
24.   
25.     imgContext = imgCanvas.getContext("2d");  
26.     imgContext.fillRect(20, 20, 100, 100);  
27.     return imgCanvas.toDataURL("image/jpeg");  
28. }  
29.   
30. </script>  

 由于jsPDF处理的图片数据为DataURL的，你可通过html5的画布功能进行转化下，之后在通过jsPDF的addImage方法向PDF中插入图片。