這次帶給大家用js實作html轉pdf,用js實作html轉pdf的注意事項有哪些,下面就是實戰案例,一起來看一下。
於是做了個小案例來測試這個功能。
<body> <!-- PDF --> <p class="bb" id="ctn"> <p class="anliu" id="anliu">生成PDF</p> </p></body><script src="../../Scripts/aps/html2canvas.js"></script><script src="../../Scripts/aps/jsPdf.debug.js"></script>
js寫法
window.onload =function(){var downPdf = document.getElementById("anliu"); downPdf.onclick = function() { html2canvas(document.body, { onrendered: function(canvas) { //返回图片URL,参数:图片格式和清晰度(0-1) var pageData = canvas.toDataURL('image/jpeg', 1.0); //方向默认竖直,尺寸ponits,格式a4【595.28,841.89] var pdf = new jsPDF('', 'pt', 'a4'); //需要dataUrl格式 pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height ); pdf.save('tup.pdf'); } }); } }
1,寫完一測試看,報了個錯誤Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported。 於是我換一種方法,把所有圖片刪掉測試,再點擊生成pdf,結果是沒問題,這樣看來報錯的原因是圖片引起的。
一查資料是因為圖片和頁面所在網域不同,出現跨網域傳輸的問題,說白了就是要在伺服器環境下存取。於是在伺服器環境下測試沒問題,成功產生pdf檔。
2,html2canvas.js截圖不全的問題
#把這個測試實作的功能放到專案裡面去,遇到了一個新問題,產生的pdf只有頁面視窗可見的區域,有捲軸的下面沒有產生出來。
於是又找了一下,html2canvas 截取圖片不支援高度,會造成只可以截到瀏覽器可見的,如果出現捲軸則不會截取,所以造成jsPdf.js根據截圖產生的pdf出現不全的問題。既然是html2canvas截圖的原因引起的那就從這裡來解決。
網路上看了別人寫的案例,結合自己測試+分析發現,如果截取是body的這個層級,而剛好body設定了overflow: hidden;那超出的部分是永遠截取不到的,因為這個節點的dom高就是視窗可見的高度,不包含滾動條多出來的部分。
於是我把滾動條這一節點的樣式,height: auto;讓高度給子元素去撐開。 再往上把父節點都去掉overflow: hidden;去掉元素不可見。
看一下引入jquery後,在專案中重新寫的js
var pdfcc = $('.pdf-cc'); pdfcc.on('click', function (event) { html2canvas($("#bb-pdf-ctn"), { allowTaint: true, height: $("#bb-pdf-ctn").outerHeight(), onrendered: function (canvas) { //返回图片URL,参数:图片格式和清晰度(0-1) var pageData = canvas.toDataURL('image/jpeg', 1.0); //方向默认竖直,尺寸ponits,格式a4【595.28,841.89] var pdf = new jsPDF('', 'pt', 'a4'); //需要dataUrl格式 pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height); pdf.save('pdf.pdf'); } }); });
3,html2canvas設定了2個新的參數
#允許跨域:allowTaint: true,
設定高度:height: $("#bb-pdf-ctn").outerHeight(),
高度就是滾動條這個節點的高度。
OK,就這樣搞定滾動條區域截圖不全的問題了。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是用js實作html轉pdf的詳細內容。更多資訊請關注PHP中文網其他相關文章!