通過純js將網(wǎng)頁保存為pdf，A4分頁，無需服務(wù)端參與

1.引入js庫文件：

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

2.思路：

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

3.核心代碼：

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

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

解決html2canvas截取頁面太模糊，創(chuàng)建一個新的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畫布放大若干倍，然后盛放在較小的容器內(nèi)，就顯得不模糊了：

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');//有兩個高度需要區(qū)分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)//當內(nèi)容未超過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
版權(quán)聲明：本文為作者原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
內(nèi)容解析By：CSDN,CNBLOG博客文章一鍵轉(zhuǎn)載插件

總結(jié)

以上是生活随笔為你收集整理的[转]JS导出PDF的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。