html2Canvas+jspdf 粗暴解決顯示不全問題(經測可用)


經過查看各個大佬的博客,得出以下解決方法。

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="../html2Canvas/render-html-to-pdf-master/docs/js/html2canvas.js"></script>
    <script type="text/javascript" src="../html2Canvas/render-html-to-pdf-master/docs/js/jsPdf.debug.js"></script>
</head>
<body>
    <style>
        .export_content{
            width: 600px;
            height: 100px;
            overflow: auto;
        }
        #content{
            width: 600px;
            height: auto;
            padding: 30px;
            position: absolute;
            z-index: 0;
        }
    </style>
    <button id="exportToPdf">導出為PDF</button>
    <div class="export_content">
        <div >
            要導出的內容
        </div>
    </div>
    
    <script type="text/javascript">
        var downPdf = document.getElementById("exportToPdf");
        downPdf.onclick = function () {
        var targetDom = $(".export_content");  
        var copyDom = targetDom.clone().attr('id','content');  
        copyDom.width(targetDom.width() + "px");  
        $('body').append(copyDom);  
            html2canvas(
                copyDom,
                    {   background:"#fff",
                        dpi: 192,//導出pdf清晰度
                        scale:2,
                        onrendered: 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;
                            //pdf頁面偏移
                            var position = 0;
                            //html頁面生成的canvas在pdf中圖片的寬高(a4紙的尺寸[595.28,841.89])
                            var imgWidth = 595.28;
                            var imgHeight = 592.28 / contentWidth * contentHeight;
                            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('content.pdf');
                            copyDom.remove()
                        }, 
                    })
        }
    </script>
    
</body>
</html>
 
現在還有個問題,截取的時候如果內容太長會閃屏.
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM