jsPDF搭配html2canvas导出PDF仅捕获部分页面元素问题求助

问题现象 #

• 需求：导出页面内除<video>标签外的所有元素，指定导出容器为id="printedPart"的div节点，页面正常效果如下：
  
• 异常表现：导出的PDF仅显示人脸裁剪图片区域，容器内上方的检测时长、真伪标识、准确率内容全部缺失，异常效果如下：
  

原有代码 #

HTML结构

<div class="container">
<a class="nav-link" href="{%url 'kepalsuan:home'%}">
    <div class="logo text-center mt-1 mb-3"><img src="{% static 'images/logo1.png'%}" alt="Logo"></div>
</a>
<hr />
<div class="result text-center">
    <div id="printedPart">
        <h2>It Takes <span style="font-size:40px;font-weight:600;">{{ duration }}</span> seconds to detect It!</h2>
        <div class="hasilakhir mt-3">
            {%if output == "REAL" %}
            <img src="{% static 'images/realstamp.png'%}" alt="real" height="100px" width="auto" style="float:left; padding-left:350px;">
            <h1 id="realaccuracy" style="color:green; float:right; padding-right:400px; padding-top:20px;">{{ confidence }} %</h1>
            {%else%}
            <img src="{% static 'images/fakestamp.png'%}" alt="fake" height="100px" width="auto" style="float:left; padding-left:350px;">
            <h1 id="fakeaccuracy" style="color:red; float:right;padding-right:400px;padding-top:20px;">{{ confidence }} %</h1>
            {%endif%}
        </div>
        <hr>
        <h3 style="margin-top:125px;">Face Cropped Frames</h3>
        <div id="faces_images" class="col-12 mb-2">
            {% for each_image in faces_cropped_images %}
            <img src="{%static each_image%}" class="faces" width="auto" height="150" /> {%endfor%}
        </div>
    </div>
    <video height="320" width="640" id="predict-media" controls>
  <source src="{{MEDIA_URL}}{{original_video}}" type="video/mp4" codecs="avc1.4d002a" />
    </video>
</div>
<div class="text-center">
    <a class="btn btn-warning mt-5 btn-lg" href="javascript:downloadResult()" style="color:white;font-weight: 700;">Download Result!</a>
</div>

原有导出JS代码

var div = document.querySelector("#printedPart")

function downloadResult() {
    var imgData;
    html2canvas($("#printedPart"), {
        useCORS: true,
        onrendered: function(canvas) {
            imgData = canvas.toDataURL('image/png');
            var doc = new jsPDF('l', 'px', 'a4');
            doc.addImage(imgData, 'png', 10, 200);
            doc.save('kepalsuan_reports.pdf');
        }
    });
};

问题根因 #

• 浮动布局导致容器高度塌陷：hasilakhir容器内的印章、准确率文字都设置了float浮动，父容器#printedPart没有触发BFC，html2canvas计算容器高度时没有把浮动元素的高度统计进去，只捕获到了下方没有浮动的人脸图片区域。
• API使用错误：一是传入了jQuery对象给html2canvas，部分版本无法正确识别节点参数；二是用了v1.0+版本已经废弃的onrendered回调，兼容性差；三是addImage设置的Y轴起始坐标为200px，且没有做等比缩放，上方内容直接偏移到PDF可视区域外。
• 配置缺失：没有设置导出缩放比，清晰度差，也没有配置allowTaint参数，跨域图片容易渲染失败。

修复方案 #

1. 先给导出容器加CSS样式，清除浮动带来的高度塌陷问题：

#printedPart {
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

2. 替换原有导出JS代码，修正API用法、坐标和缩放逻辑：

function downloadResult() {
  // 传入原生DOM节点
  const exportNode = document.getElementById("printedPart");
  html2canvas(exportNode, {
    useCORS: true,
    allowTaint: false,
    scale: 2, // 提升导出清晰度
    logging: false // 关闭控制台调试日志
  }).then(canvas => {
    const imgData = canvas.toDataURL("image/png");
    // 初始化横向A4尺寸PDF
    const doc = new jsPDF("l", "px", "a4");
    const pageWidth = doc.internal.pageSize.getWidth();
    const pageHeight = doc.internal.pageSize.getHeight();
    // 计算图片等比缩放比例，保证内容完整显示在页面内
    const imgRatio = Math.min(pageWidth / canvas.width, pageHeight / canvas.height);
    const renderWidth = canvas.width * imgRatio;
    const renderHeight = canvas.height * imgRatio;
    // 居中放置，上下留20px边距
    const x = (pageWidth - renderWidth) / 2;
    const y = 20;
    doc.addImage(imgData, "png", x, y, renderWidth, renderHeight);
    doc.save("kepalsuan_reports.pdf");
  });
}

注意事项 #

• 确认引入的html2canvas版本≥1.0.0，jsPDF版本≥2.0.0，旧版本API不兼容Promise写法。
• 如果静态资源图片存在跨域问题，需要给对应资源配置跨域响应头，否则会出现图片渲染空白。
• 触发导出前确保页面内所有图片都加载完成，避免出现图片缺失。

内容的提问来源于stack exchange，提问作者lukasyahya_