接上篇文章，https://www.cnblogs.com/boytnt/p/11711439.html，繼續探索如何給每頁加頁眉，其實思想很簡單，比如頁眉上想添加logo，那就在jspdf創建每頁時多加個圖片上去就好了。
先上效果圖，借華為LOGO一用：
再放代碼，主體還是上篇文章的分頁導出算法：
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;font-size:26px; } 14 #logo { display:none; } 15 .c0 { background-color:#ea644a; } 16 .c1 { background-color:#f1a325; } 17 .c2 { background-color:#38b03f; } 18 .c3 { background-color:#03b8cf; } 19 .c4 { background-color:#bd7b46; } 20 .c5 { background-color:#8666b8; } 21 </style> 22 <script> 23 function exportPdf() { 24 var element = document.getElementById("page"); 25 html2canvas(element, { 26 logging:false 27 }).then(function(canvas) { 28 var pdf = new jsPDF('p', 'mm', 'a4'); //A4紙，縱向 29 30 var ctx = canvas.getContext('2d'), 31 a4w = 190, a4h = 257, //A4大小，210mm x 297mm，左右保留10mm，上下保留20mm的邊距，顯示區域190x257 32 imgHeight = Math.floor(a4h * canvas.width / a4w), //按A4顯示比例換算一頁圖像的像素高度 33 renderedHeight = 0; 34 35 var logo = document.getElementById("logo"); //放在頁眉的圖標 36 37 while(renderedHeight < canvas.height) { 38 var page = document.createElement("canvas"); 39 page.width = canvas.width; 40 page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能內容不足一頁 41 42 //用getImageData剪裁指定區域，並畫到前面創建的canvas對象中 43 page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0); 44 45 //添加圖像到頁面，保留10mm/20mm邊距 46 pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 20, a4w, Math.min(a4h, a4w * page.height / page.width)); 47 //添加頁眉的logo 48 pdf.addImage(logo, 'PNG', 5, 3); 49 50 renderedHeight += imgHeight; 51 if(renderedHeight < canvas.height) 52 pdf.addPage(); //如果后面還有內容，添加一個空頁 53 54 delete page; 55 } 56 pdf.save('content.pdf'); 57 }); 58 } 59 60 function generateData() { 61 var html = []; 62 html[html.length] = '<ul>'; 63 for(var i = 0;i < 20;++i) { 64 html[html.length] = '<li class="c'; 65 html[html.length] = i % 6; 66 html[html.length] = '">這是第'; 67 html[html.length] = i; 68 html[html.length] = '行</li>'; 69 } 70 html[html.length] = '</ul>'; 71 72 document.getElementById('page').innerHTML = html.join(''); 73 } 74 </script> 75 </head> 76 <body onload="generateData()"> 77 <button onclick="exportPdf()">導出pdf</button> 78 <div id="page"></div> 79 <img id="logo" src="huawei.png" /> 80 </body> 81 </html>
變化在於以下幾點：
1、添加了一個隱藏的<img>標簽，用於承載logo；
2、創建每一頁時，多加了一行pdf.addImage(logo, 'PNG', 5, 3)，用於在頁眉位置放logo；
不使用<img>標簽，在代碼里直接創建Image對象然后指定src來加載圖片也行，但要注意應在Image對象的onload事件里再處理后續代碼。另外注意運行時不能直接雙擊打開，需要放到web服務器上，因為加載了圖片資源，受瀏覽器安全性限制，toDataURL僅允許同源資源，否則會報錯：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported。