html2canvas生成截图有时空白有时正常
尝试过以下方法
1.图片过长，因浏览器滚动条导致的，已在参数中添加解决方法，但没有用
2.dom未加载完就执行，已使用window.onload,settimeout仍无法解决，百思不得其解
####补充
3.增加了canvas缓存问题,没有解决
HTMLCanvasElement.prototype.getContext = function(origFn) {
return function(type, attributes) {
if (type === '2d') {
attributes = Object.assign({}, attributes, {
preserveDrawingBuffer: true,
});
}
return origFn.call(this, type, attributes);
};
}(HTMLCanvasElement.prototype.getContext);
4.在html2canvas得参数中加入了timeout,无用
5.在onrendered方法中直接打印canvas,发现从这里就是会出现空白状态,所以与canvas.toDataURL无关
setTimeout(()=>{
html2canvas(myDom, {
// allowTaint:true,//允许跨域图片的加载
dpi: 350, // 提升导出文件的分辨率
scale:4,
useCORS: true,
background: "#ffffff",
windowWidth: myDom.scrollWidth,
windowHeight: myDom.scrollHeight,
x: 0,
y: window.pageYOffset,
timeout:1000,
onrendered: function (canvas) {
document.body.appendChild(canvas)
console.log('canvas',canvas)
6.正常来讲,我将执行方法都写在window.onload中调用的,那么当渲染时应该是拿到完整的dom节点了,
而我遇到的问题: 渲染出错时不是全部空白,还有几条下划线出现,并且宽高的计算是正常的,会根据内容生成对应的几张A4纸,
我也有考虑是不是html2canvas内传入dom节点时过大,导致还没渲染完就执行下一步,也就是它是异步执行的,所以做了如下更改
可惜依然没效果
<div class="layui-form-item" id="fixed-block">
<div>
<button id="renderPdf" type="button" class="layui-btn">下载PDF文档</button>
<button id="printPdf" type="button" class="layui-btn ">打印</button>
</div>
</div>
</body>
<script type="text/javascript" src="__STATIC_JS__canvas/canvas_js/jsPdf.debug.js"></script>
<script type="text/javascript" src="__STATIC_JS__canvas/canvas_js/html2canvas.js"></script>
<script>
window.onload=function () {
if(document.getElementById("wrap")){
var downPdf = document.getElementById("renderPdf");
var myDom=document.getElementById("wrap")
downPdf.onclick = ()=>{
f(downPdf,myDom)
}
}
function f(downPdf,myDom) {
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
with (downPdf.style) {
display = "none";
}
setTimeout(()=>{
html2canvas(myDom, {
// allowTaint:true,//允许跨域图片的加载
dpi: 350, // 提升导出文件的分辨率
scale:4,
useCORS: true,
background: "#ffffff",
windowWidth: myDom.scrollWidth,
windowHeight: myDom.scrollHeight,
x: 0,
y: window.pageYOffset,
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;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = (592.28 / contentWidth) * contentHeight;
var pageData = canvas.toDataURL("image/jpeg", 1.0);
document.body.appendChild(canvas)
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('{$report.value.excel_1}'+"_report.pdf");
// pdf.save("123.pdf");
with (downPdf.style) {
display = "block";
}
},
});
},500)
}
相同代码正常情况如下
相同代码非正常情况如下
