將WEB頁面直接導出為pdf文件是經常會用到的一個功能，尤其是各種報表系統。總結了一下目前幾種主流的做法：
-
在后端用代碼生成pdf文件，比如iText一類；
-
在后端抓取頁面並生成pdf文件，比如phantomjs一類；
-
在前端用js直接生成pdf文件；
方案3的優勢在於前端直接生成，所見即所得。今天要探索的就是html2canvas和jspdf，前者用於將頁面元素render生成canvas，后者用於將canvas生成pdf文檔。需要注意的是，這種方法對IE系列支持不好。
html2canvas的主頁：http://html2canvas.hertzen.com/
jspdf的主頁：https://parall.ax/products/jspdf
兩者的使用都比較簡單，網上的文章很多，但是對於長網頁導出，jspdf是不支持分頁的，目前有一種做法是addImage時控制起始縱坐標為負值，然后超出頁面底邊的自動隱藏，就達到顯示上的分頁效果了，但這種方法無法給pdf頁面留頁邊距，因此本文主要針對分頁與頁邊距進行探索。
基本思路是對得到的canvas進行切割，按A4紙大小並留邊距后的比例進行剪裁，切出一頁一頁的內容來，再分別加到pdf中。上個DEMO：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>測試PDF導出</title> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <script src="js/html2canvas.min.js"></script> 9 <script src="js/jspdf.min.js"></script> 10 <style> 11 html,body { margin:0; padding:0; } 12 #page ul { padding:0;list-style:none; } 13 #page li { line-height:110px;color:#fff;padding-left:10px; } 14 .c0 { background-color:#ea644a; } 15 .c1 { background-color:#f1a325; } 16 .c2 { background-color:#38b03f; } 17 .c3 { background-color:#03b8cf; } 18 .c4 { background-color:#bd7b46; } 19 .c5 { background-color:#8666b8; } 20 </style> 21 <script> 22 function exportPdf() { 23 var element = document.getElementById("page"); 24 html2canvas(element, { 25 logging:false 26 }).then(function(canvas) { 27 var pdf = new jsPDF('p', 'mm', 'a4'); //A4紙，縱向 28 var ctx = canvas.getContext('2d'), 29 a4w = 190, a4h = 277, //A4大小，210mm x 297mm，四邊各保留10mm的邊距，顯示區域190x277 30 imgHeight = Math.floor(a4h * canvas.width / a4w), //按A4顯示比例換算一頁圖像的像素高度 31 renderedHeight = 0; 32 33 while(renderedHeight < canvas.height) { 34 var page = document.createElement("canvas"); 35 page.width = canvas.width; 36 page.height = Math.min(imgHeight, canvas.height - renderedHeight);//可能內容不足一頁 37 38 //用getImageData剪裁指定區域，並畫到前面創建的canvas對象中 39 page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0); 40 pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); //添加圖像到頁面，保留10mm邊距 41 42 renderedHeight += imgHeight; 43 if(renderedHeight < canvas.height) 44 pdf.addPage();//如果后面還有內容，添加一個空頁 45 delete page; 46 } 47 pdf.save('content.pdf'); 48 }); 49 } 50 51 function generateData() { 52 var html = []; 53 html[html.length] = '<ul>'; 54 for(var i = 0;i < 20;++i) { 55 html[html.length] = '<li class="c'; 56 html[html.length] = i % 6; 57 html[html.length] = '">這是第'; 58 html[html.length] = i; 59 html[html.length] = '行</li>'; 60 } 61 html[html.length] = '</ul>'; 62 document.getElementById('page').innerHTML = html.join(''); 63 } 64 </script> 65 </head> 66 <body onload="generateData()"> 67 <button onclick="exportPdf()">導出pdf</button> 68 <div id="page"></div> 69 </body> 70 </html>
核心的是exportPdf這個方法 ，感興趣的同學可以參考。生成的pdf效果如圖，可以看到分頁和頁邊距效果：
