无法让 html2canvas 为使用 CSS 创建的树正常工作

Question

我有一个 CSS 树，如下所示：

当我使用 html2canvas 将其导出为图像时，没有兄弟节点的子节点（给定父节点的唯一子节点）在导出到图像时会有额外的间隙，如下所示。

HTML/CSS 看起来很完美。

请检查下面的 CodePen，其中转换后的图像导出显示在 HTML 元素的正下方：
HTML CSS Tree - CodePen

HTML（缩进以提高关卡的可读性）

<!-- This example is created for a stackoverflow question -->
<div class="tree">
  <h2>HTML/CSS TREE</h2>
  <ul><li id="TOPLEVEL" class="toplevel"><a href="#">TOP LEVEL</a>
    <ul><li><a href="#">2ND LEVEL</a>
      <ul><li><a href="#">3RD LEVEL 1</a>
            <ul><li><a href="">4TH LEVEL 1</a>
                  <ul><li><a href="">5TH LEVEL 1</a>
                    <ul><li><a href="">6TH LEVEL 1</a></li></ul></li>
                      <li><a href="">5TH LEVEL 2</a></li></ul></li>
                <li><a href="">4TH LEVEL 2</a>
                  <ul><li><a href="">5TH LEVEL 3</a></li></ul></li></ul></li>
          <li><a href="#">3RD LEVEL 2</a>
            <ul><li><a href="">4TH LEVEL 3</a>
                  <ul><li><a href="">5TH LEVEL 4</a>
                    <ul><li><a href="">6TH LEVEL 2</a></li></ul></li>
                      <li><a href="">5TH LEVEL 5</a></li>
                      <li><a href="">5TH LEVEL 6</a></li></ul></li>
                <li><a href="">4TH LEVEL 4</a>
                  <ul><li><a href="">5TH LEVEL 7</a></li></ul></li></ul></li>
          <li><a href="#">3RD LEVEL 3</a>
            <ul><li><a href="#">6TH LEVEL 1</a></li></ul></li>
          <li><a href="#">3RD LEVEL 4</a></li></ul></li></ul></li></ul>
</div>

<div class="html2canvasImage">
  <h2>CONVERTED IMAGE</h2>
</div>

CSS

/*Now the CSS*/
.tree * {margin: 0; padding: 0;}

.tree ul {
    padding-top: 20px; position: relative;
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0px;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}

.tree li a{
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}

JavaScript

  html2canvas(document.querySelector(".toplevel"), {scrollX: 0,scrollY: 0}).then(canvas => {
    document.querySelector('.html2canvasImage').appendChild(canvas)
  });

任何想法都会很有帮助！

我试图更改 CSS 填充，但这弄乱了原始树。

我希望使 CSS 和图像看起来完全相同，但没能做到正确。

我也尝试了以下解决方案，但没有用：
why there is a White space on the top on html2canvas?

Answer 1

您面临的 html2canvas 对于使用 CSS 创建的树无法正常工作的问题可能与 html2canvas 在呈现使用 CSS 转换的元素时遇到问题有关。

一种可能的解决方案是在要呈现的元素上禁用 CSS 转换。这可以通过将以下 CSS 规则添加到您的样式表来完成：

.disable-transform {
  transform: none !important;
}

然后，将 disable-transform 类添加到任何使用 CSS 进行转换的元素。例如，如果您有一个 ID 为 tree-container 的容器元素正在使用 CSS 进行转换，您可以向其添加 disable-transform 类，如下所示：

<div id="tree-container" class="disable-transform">
  <!-- tree elements here -->
</div>

如果此解决方案不适用于您的特定情况，您可以尝试其他解决方法，例如更改树元素的 CSS 或使用不同的库来捕获 HTML 元素的屏幕截图。

我希望这有帮助！如果您还有其他问题，请告诉我。