荒野守望者 2020-06-29 10:07 采纳率: 0%
浏览 2763
已结题

使用html2canvas.js导出图片网页过长图片变黑问题

最近在做项目,需求是把网页转成pdf并导出,我使用的是html2canvas.js和jsPDF.js来实现的。
现在问题在于,如果页面比较少导出的图片是正常的,随之PDF就是正常的。但是
如果页面比较长,导出的图片就是黑色的,PDF也是黑色的,请问哪位大神能帮我解
决一下这个问题,下面是代码:
var pdfContainer = document.getElementById("month_smoke_control" + month_smoke_control_vue.smoke_winds[0].id);
html2canvas(pdfContainer, {
onrendered:function(canvas) {
loadPdf(canvas);
savePdf();

            }
        })

function loadPdf(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;

            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = parseInt(contentWidth / 595.28 * 841.89);

            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //pdf页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 555.28;
            var imgHeight = 555.28/contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);
            //console.log(pageData);
            //var pdf = new jsPDF('', 'pt', 'a4');
            //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
                if(addFlag){
                    pdf.addPage();
                }

            } else {
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //pdf.addPage();
                    //避免添加空白页
                    //pdf.addPage();
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
        }

        function savePdf(){
            pdf.save(build_name +"第" + week_num + title_return  +"防烟排烟-"+smoke_type+"检测任务报告.pdf");
            $("body").css("overflow", "visible");
            document.getElementById("month_smoke_control_pdf").style.display = "";
            document.getElementById("month_smoke_control_loading_bg").style.display = "none";
            $(".month_smoke_control_page").css('display', '');
        }

上面代码中,如果页面过长,html2canvas中生成的图片就是黑色,页面背景我都设置成白色了,但是也没用,还请诸位帮忙解决一下。

  • 写回答

4条回答 默认 最新

  • 炎夏的摩羯 2021-06-09 10:00
    关注

    楼主这个问题解决了吗,我也遇到了相似的问题

    评论

报告相同问题?

悬赏问题

  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度
  • ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测