本文针对html2canvas在含滚动条页面中截图不全的问题，分析发现原因为外层固定高度限制了渲染范围。通过调整DOM结构，将滚动容器内部增加无高度限制的div由内容撑开，解决了截图截断现象。同时提供了基于html2canvas和jspdf的完整PDF导出封装代码，支持跨域图片及分页处理。
实现方法
首先，使用 npm install html2canvas 安装 html2canvas 库，将 HTML 元素转换为图片数据流。接着，使用 npm install jspdf 安装 jspdf 库，将生成的图片数据流转换为 PDF 文件并进行保存。
遇见问题
1、截图不全
此前未使用过该工具，参考网络代码后发现，当页面存在滚动条时，截图往往不完整，仅能捕获当前视口可见的内容。例如，对于一个带有滚动条的 HTML 页面，分别将滚动条置于顶部和底部时，截图结果均只显示可视区域。
导出为 PDF 后，结果同样仅包含窗口展示的部分，滚动条覆盖区域的内容未能被捕获。
查阅相关资料后，发现有人建议修改配置参数或将滚动条滚动至顶部，但这些方法并未解决我的具体问题。根据直觉判断，问题可能出在元素高度计算上。原页面结构中，内容高度大致等于最外层 div 的高度，而外层容器的高度是固定的。尝试在内部再增加一个 div，且不设置固定高度，使其高度完全由内容撑开，问题随即得到解决。
<div class="red-div" id="pdfDom_children"> // 这里是滚动的div
<div class="first-div"></div>
<div class="second-div"></div>
<div>111</div>
</div>修改后的页面元素
<div class="red-div">
<div id="pdfDom_children">
<div class="first-div"></div>
<div class="second-div"></div>
<div>111</div>
</div>
</div>具体封装代码
// 导出页面为PDF格式
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
const htmlToPdf = {
getPdf(title: string) {
const targetDom = document.getElementById("pdfDom_children");
html2canvas(document.querySelector("#pdfDom_children"), {
allowTaint: true,
backgroundColor: "white",
useCORS: true, //支持图片跨域
scale: 1, //设置放大的倍数
// height: targetDom.clientHeight, // 网上原来的设置，没用，注释掉了
// width: targetDom.clientWidth, // 网上原来的设置，没用，注释掉了
// windowHeight: targetDom.clientHeight, // 网上原来的设置，没用，注释掉了
}).then((canvas) => {
//内容的宽度
const contentWidth = canvas.width;
//内容的高度
const contentHeight = canvas.height;
//一页pdf显示htm1页面生成的canvas高度，a4纸的尺寸[595.28,841.89];
const pageHeight = (contentWidth / 592.28) * 841.89;
//未生成pdf的htm1页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89],htm1页面生成的canvas在pdf中图片的宽高
const imgwidth = 595.28;
const imgHeight = (592.28 / contentWidth) * contentHeight;
//canvas转图片数据
const pageData = canvas.toDataURL("img/jpeg", 1.0);
//新建JSPDF对象
const PDF = new JsPDF("", "pt", "a4");
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();
}
}
}
console.log(pageData); //保存文件
PDF.save(title + ".pdf");
});
},
};
export default htmlToPdf;总结
到此这篇关于使用html2canvas截图不全问题的解决办法的文章就介绍到这了,更多相关html2canvas截图不全问题内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！