jsPDF 导出html为pdf或图片内容截断(无法获取到需要下拉的部分)终极解决方案

解决思路:
点击按钮后1s内使用animate方法迅速滑到页面底部

此代码需要提前下载此文件 :jspdf.min.js

    $("#createPDFBtn").click(function (e) {
	    // 迅速滑到页面底部
        $("html,body").animate({scrollTop:0},1);
        var content = document.querySelector('.pdf')
        download(content)
    })

    function download(content) {
        html2canvas(content, {
            allowTaint: true,
            scale: 3 // 提升画面质量,但是会增加文件大小
        }).then(function (canvas) {
            /**jspdf将html转为pdf一页显示不截断,整体思路:
             * 1. 获取DOM
             * 2. 将DOM转换为canvas
             * 3. 获取canvas的宽度、高度(稍微大一点)
             * 4. 将pdf的宽高设置为canvas的宽高
             * 5. 将canvas转为图片
             * 6. 实例化jspdf,将内容图片放在pdf中(因为内容宽高和pdf宽高一样,就只需要一页,也防止内容截断问题)
             */
                // 得到canvas画布的单位是px 像素单位
            var contentWidth = canvas.width
            var contentHeight = canvas.height

            console.log('contentWidth', contentWidth)
            console.log('contentHeight', contentHeight)
            // 将canvas转为base64图片
            var pageData = canvas.toDataURL('image/jpeg', 2.0)

            // 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
            // 2为上面的scale 缩放了2倍
            var pdfX = (contentWidth + 10) / 2 * 0.75
            var pdfY = (contentHeight ) / 2 * 0.75 // 500为底部留白

            // 设置内容图片的尺寸,img是pt单位
            var imgX = pdfX;
            var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离

            // 初始化jspdf 第一个参数方向:默认''时为纵向,第二个参数设置pdf内容图片使用的长度单位为pt,第三个参数为PDF的大小,单位是pt
            var pdf = new jsPDF('', 'pt', [pdfX, pdfY])

            // 将内容图片添加到pdf中,因为内容宽高和pdf宽高一样,就只需要一页,位置就是 0,0
            pdf.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
            pdf.save('区域洞察报告.pdf')
        })
    }
    $("#createPhotoBtn").on("click", function () {
    	// 迅速滑到页面底部
        $("html,body").animate({scrollTop:0},1);
        html2canvas(document.querySelector('.pdf'), {
            height: 4044 + 20,
            onrendered: function (canvas) {
                var url = canvas.toDataURL();
                //以下代码为下载此图片功能
                var triggerDownload = $("<a>").attr("href", url).attr("download", "区域洞察报告.png").appendTo("body");
                triggerDownload[0].click();
                triggerDownload.remove();
            }
        });
    });

猜你喜欢

转载自blog.csdn.net/qq_30803353/article/details/107722453