通過純js將網頁保存為pdf，A4分頁，無需服務端參與

1.引入js庫文件：

<script src="../static/jspdf/html2canvas.js"></script><script src="../static/jspdf/jsPdf.debug.js"></script>

2.思路：

用html2canvas截取頁面（html2canvas就是這樣一款前端插件,它的原理是將Dom節點在Canvas里邊畫出來），然后用jsPDF來生成pdf文件。

3.核心代碼：

為了保證生成的pdf空白區域沒有黑色背景，在操作之前先把背景設置為白色（因為沒有背景色，截取時會以黑色填充）

$("#"+divID).css("background-color","white");

解決html2canvas截取頁面太模糊，創建一個新的canvas：

var canvas_new = document.createElement("canvas");var scale = 2;var w = parseInt(window.getComputedStyle(document.querySelector("#"+divID)).width);var h = parseInt(window.getComputedStyle(document.querySelector("#"+divID)).height);

將canvas畫布放大若干倍，然后盛放在較小的容器內，就顯得不模糊了：

canvas_new.width = w * scale;canvas_new.height = h * scale;canvas_new.getContext("2d").scale(scale, scale);

進行導出：

var options = {canvas: canvas_new};html2canvas(document.querySelector("#"+divID),options)..then(function(canvas) {var contentWidth = canvas.width;var contentHeight = canvas.height;//一頁pdf顯示html頁面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89;//未生成pdf的html頁面高度var leftHeight = contentHeight;//頁面偏移var position = 0;//a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高var imgWidth = 595.28;var imgHeight = 592.28/contentWidth * contentHeight+45;var pageData = canvas.toDataURL('image/jpeg', 1.0);var pdf = new jsPDF('', 'pt', 'a4');//有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)//當內容未超過pdf一頁顯示的范圍，無需分頁if (leftHeight < pageHeight) {pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );} else {while(leftHeight > 0) {pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeight;position -= 841.89;//避免添加空白頁if(leftHeight > 0) {pdf.addPage();}}}pdf.save('name.pdf');

?

---------------------
作者：致虛極POLE守靜篤
來源：CSDN
原文：https://blog.csdn.net/u011821334/article/details/79389426
版權聲明：本文為作者原創文章，轉載請附上博文鏈接！
內容解析By：CSDN,CNBLOG博客文章一鍵轉載插件