于是做了個小案例來測試這個功能。
<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，參數(shù)：圖片格式和清晰度(0-1) var pageData = canvas.toDataURL('image/jpeg', 1.0); //方向默認(rèn)豎直，尺寸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，結(jié)果是沒問題，這樣看來報錯的原因是圖片引起的。
一查資料是因為圖片和頁面所在域不同，出現(xiàn)跨域傳輸?shù)膯栴}，說白了就是要在服務(wù)器環(huán)境下訪問。于是在服務(wù)器環(huán)境下測試沒問題，成功生成pdf文件。
2，html2canvas.js截圖不全的問題
把這個測試實現(xiàn)的功能放到項目里面去，遇到了一個新問題，生成的pdf只有頁面窗口可見的區(qū)域，有滾動條的下面沒有生成出來。
于是又找了一下，html2canvas 截取圖片不支持高度，會造成只可以截到瀏覽器可見的，如果出現(xiàn)滾動條則不會截全，所以造成jsPdf.js根據(jù)截圖生成的pdf出現(xiàn)不全的問題。既然是html2canvas截圖的原因引起的那就從這里來解決。
網(wǎng)上看了下別人寫的案例，結(jié)合自己測試+分析發(fā)現(xiàn)，如果截取是body的這個層級，而剛好body設(shè)置了overflow: hidden;那超出的部分是永遠(yuǎn)截取不到的，因為這個節(jié)點的dom高就是窗口可見的高度，并不包含滾動條多出來的部分。
于是我把滾動條這一節(jié)點的樣式，height: auto;讓高度給子元素去撐開。 再往上把父節(jié)點都去掉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，參數(shù)：圖片格式和清晰度(0-1) var pageData = canvas.toDataURL('image/jpeg', 1.0); //方向默認(rèn)豎直，尺寸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設(shè)置了2個新的參數(shù)
允許跨域：allowTaint: true,
設(shè)置高度：height: $("#bb-pdf-ctn").outerHeight(),
高度就是滾動條這個節(jié)點的高度。
OK，就這樣搞定滾動條區(qū)域截圖不全的問題了。
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注 其它相關(guān)文章！
推薦閱讀：
text-align如何實現(xiàn)兩端對齊
JavaScript的繼承與原型鏈
以上就是用js實現(xiàn)html轉(zhuǎn)pdf的詳細(xì)內(nèi)容，更多請關(guān)注 其它相關(guān)文章！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
新聞熱點
疑難解答
