曾經生成PDF都是伺服器端程式碼的專利，在今天的這篇文章中，我們將介紹一個javascript類庫 - jsPDF，使用它能夠幫助你使用前端指令碼生成PDF檔案，是不是很棒，試試吧！

jsPDF支援不同型別的PDF檔案格式，包括：文字，數字，圖形，圖片，同時你可以自由的編輯標題或者其它型別元素。

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

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

下面做幾個簡單的demo

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

 並不需要依賴庫，只要引入jspdf.js(或壓縮的jspdf.min.js)即可。

demo1：生成簡單的文字

Html程式碼

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

 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.    doc.output('datauri');  
10. }  
11. //生成並下載  
12. function createAndDownload(){  
13.    var doc = new jsPDF();  
14.    doc.text(20, 20, 'Hello world!');  
15.    doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');  
16.    doc.addPage(); //生成下一頁  
17.    doc.text(20, 20, 'Do you like that?');  
18.    doc.save('Test.pdf');  
19. }  
20. </script>  

demo2生成圖片

Html程式碼

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

 Js程式碼

1. <script type="text/javascript">  
2. //生成並下載  
3. function createAndDownload(){  
4.    var doc = new jsPDF();  
5.    doc.setFontSize(40);  
6.    doc.text(35, 25, "jsPDF image demo");  
7.    var imgAsDataURL = createDateUrl();  
8.    doc.addImage(imgAsDataURL, 'JPEG', 15, 40, 180, 180);  
9.    doc.save('Test.pdf');  
10. }  
11. //利用html5的畫布功能生成簡單的矩形  
12. function createDateUrl(){  
13.         var imgCanvas = document.createElement("canvas");  
14.         if (imgCanvas.getContext) {  
15.             alert("您的瀏覽器支援 canvas 標籤");  
16.         } else {  
17.             alert("您的瀏覽器不支援 canvas 標籤");  
18.         }  
19.     imgContext = imgCanvas.getContext("2d");  
20.     imgContext.fillRect(20, 20, 100, 100);  
21.     return imgCanvas.toDataURL("image/jpeg");  
22. }  
23. </script>  

由於jsPDF處理的圖片資料為DataURL的，你可通過html5的畫布功能進行轉化下，之後在通過jsPDF的addImage方法向PDF中插入圖片。