實現html頁面轉pdf

實現方式比較簡單，使用js代碼實現的。

須要引入的js：

一、jQuery.js；

二、html2canvas.js（實現方式是先將Html頁面轉換成image圖片而後在轉換爲pdf，因此轉換以後會有一點不清晰【我的認爲影響不大】）；

二、FileSaver.js（下面的jspdf.js中的「savaAS」函數是基於FileSaver.js的）；

三、jspdf.js（jspdf.js的支持仍是挺多的，由於我寫的這個頁面沒有那些相對複雜的標籤【svg…】。因此本次只引入了插件包中的jspdf.js、addimage.js這兩個js文件）；

五、addimage.js；

 

上代碼：

$("#turnToPdfButton").click(function(){
　　　html2canvas($("#mainPdfHtml"), { //選擇你要導出的html區域
　　　　　onrendered: function(canvas) {
　　　　　var imgData = canvas.toDataURL('image/jpeg');
　　　　　var img = new Image();
　　　　　img.src = imgData;
　　　　　//根據圖片的尺寸設置pdf的規格，要在圖片加載成功時執行，之因此要*0.225是由於比例問題
　　　　　img.onload = function() {
　　　　　//此處須要注意，pdf橫置和豎置兩個屬性，須要根據寬高的比例來調整，否則會出現顯示不徹底的問題
　　　　　if (this.width > this.height) {
　　　　　　　var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
　　　　　} else {
　　　　　　　var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
　　　　　}
　　　　　doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
　　　　　//根據下載保存成不一樣的文件名
　　　　　doc.save('下載名稱.pdf');
　　　}
　　},
　　background: "#fff",
　　//這裏給生成的圖片默認背景，否則的話，若是你的html根節點沒設置背景的話，會用黑色填充。
　　allowTaint: true //避免一些不識別的圖片干擾，默認爲false，遇到不識別的圖片干擾則會中止處理html2canvas
　　});
});

 

 

資源下載地址：

html2canvas.js  >>>   https://github.com/niklasvh/html2canvas/releases

FileSaver.js  >>>   https://github.com/eligrey/FileSaver.js/

jspdf.js  >>>   https://github.com/MrRio/jsPDF