我发现了一种使用data-html2canvas-ignore =“true”隐藏元素的方法。然而，尽管这个隐藏元素，它仍然留下一个空的空间

Question

var testbutton = document.getElementById("testbutton"); 
 
var content = document.getElementById("content"); 
 
testbutton.onclick = function() { 
 
    html2canvas(content, { 
 
    "onrendered": function(canvas) { 
 
     document.body.appendChild(canvas); 
 
    } 
 
    }); 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 

 
<p> 
 
    <a id="testbutton" href="javascript:void(0);">test</a> 
 
</p> 
 

 
<div id="content"> 
 
    <div class="element-1">1. Is visible</div> 
 
    <div class="element-2" data-html2canvas-ignore="true">2. No visible</div> 
 
    <div class="element-3">3. Is visible</div> 
 
</div>

有没有办法真正删除元素，这样所产生的渲染图像不会留下空白空间？

Answer 1

您是否使用任何框架？如果是的话，你的框架可能有一些html功能或属性来做到这一点。

例如在Angular中，您可以使用*ngIf进行管理。

它会帮助你从你的DOM