我发现了一种使用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中删除空元素