javascript - 转换为 Canvas 时如何打开详细信息标签

Question

在我的 html 页面中，有一个 div 元素，其中包含 2-3 个详细信息标签(默认情况下，所有详细信息标签都将处于折叠模式)，其中包含表格。我正在尝试将此 html div 内容转换为 Canvas 。我正在用那个 Canvas 创建一个 pdf 文件。

下面是代码

enter code here
            <div id="result">
                    <details style="margin-top: 10px;">
                        <summary>
                            <b>Name</b>
                        </summary>
                        <table id="table1" border="0" width="100%">
                            <tr>
                                <td width="35%">Subject</td>
                            </tr>
                            <tr>
                                <td>Issues</td>
                            </tr>
                            <tr>
                                <td>Issues</td>
                            </tr>
                        </table>
                    </details>
                    <details style="margin-top: 10px;">
                        <summary>
                            <b>Name</b>
                        </summary>
                        <table id="table2" border="0" width="100%">
                            <tr>
                                <td width="35%">Subject</td>
                            </tr>
                            <tr>
                                <td>Issues</td>
                            </tr>
                            <tr>
                                <td>From</td>
                            </tr>
                        </table>
                    </details>
                    <details style="margin-top: 10px;">
                        <summary>
                            <b>Name</b>
                        </summary>
                        <table id="table3" border="0" width="100%">
                            <tr>
                                <td width="35%">Subject</td>
                            </tr>
                            <tr>
                                <td>Issues</td>
                            </tr>
                            <tr>
                                <td>From</td>
                            </tr>
                        </table>
                    </details>

            </div>

Canvas 转换和 pdf 创建代码

enter code here
            $("body").on("click", "#btnExport", function () {
                    html2canvas($('#Result')[0], {
                        onrendered: function (canvas) {
                            var data = canvas.toDataURL();
                            var docDefinition = {
                                content: [{
                                    image: data,
                                    width: 500
                                }]
                            };
                            pdfMake.createPdf(docDefinition).download("Table.pdf");
                        }
                    });
                });

但问题是我能够创建一个带有关闭详细信息标签的 pdf。我希望将整个内容保存在 pdf 中。

转换为 Canvas 时有什么方法可以更改展开此详细信息吗？

Answer 1

<details open>

<details>有一个 [open]属性。

演示 1(JavaScript):

- 收集所有<details>转换为 NodeList，然后将其转换为数组。
- 使用 for...of 迭代新数组循环。
- 在每次迭代中，它都会切换每个 <details> [open]属性为 .toggleAttribute()方法。

<小时/>

演示 2 (jQuery):

- 于 .each() <details>
- 使其[open]属性 true使用.attr()方法。

<小时/>

在调用 html2canvas() 之前运行任一版本当然。

<小时/>

演示 1

const detailsArray = Array.from(document.querySelectorAll('details'));

for (let details of detailsArray) {
  details.toggleAttribute('open');
}

details {
  margin: 10px;
  padding: 5px;
  border: 5px ridge #bbb;
}

summary {
  border: 3px inset #333;
  padding: 0 5px;
  cursor: pointer;
}

<details>
  <summary>Read More...</summary>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</details>


<details>
  <summary>Read More...</summary>
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</details>


<details>
  <summary>Read More...</summary>
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</details>

<小时/>

演示 2

$('details').each(function() {
  $(this).attr('open', true);
});

details {
  margin: 10px;
  padding: 5px;
  border: 5px ridge #bbb;
}

summary {
  border: 3px inset #333;
  padding: 0 5px;
  cursor: pointer;
}

<details>
  <summary>Read More...</summary>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</details>


<details>
  <summary>Read More...</summary>
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</details>


<details>
  <summary>Read More...</summary>
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</details>

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