Javascript 如何在转换为画布时打开详细信息标记

在我的html页面中有一个div元素，它包含2-3个details标记（默认情况下，所有details标记都将处于折叠模式），其中包含表。我正在尝试将此html div内容转换为画布。使用该画布，我正在创建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>

但问题是，我可以创建一个关闭了详细信息标签的pdf。我希望所有内容都是pdf格式的

在转换为画布时，是否有任何方法可以更改并扩展此详细信息

具有

[open]

属性

演示1（JavaScript）：

-将所有

收集到节点列表中，然后将其转换为数组。
-使用

for…of

循环遍历新数组。
-在每次迭代中，它都会使用

.toggleAttribute（）

方法切换每个

[open]
属性


演示2（jQuery）：

-On
.each（）

-使用
.attr（）
方法使其
[打开]
属性
为true


当然，在调用
html2canvas（）之前运行任一版本


演示1

constdetailsarray=Array.from（document.querySelectorAll（'details'）；
对于（让我们详细了解详细信息）{
详细信息。TogleAttribute（“开放”）；
}
详细信息{
利润率：10px；
填充物：5px；
边界：5px山脊#bbb；
}
总结{
边框：3张插图#333；
填充：0 5px；
光标：指针；
}

阅读更多。。。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
阅读更多。。。
但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。
阅读更多。。。
除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
感谢您的回复。我尝试了上面的代码。它也正在使详细信息标记在html页面中打开。我只想在画布中打开详细信息标记。请尝试编码
。如果这不起作用，插件可能不兼容，这是可能的，因为
相对较新。您是将新代码放在函数外部还是内部（如果是后者），您是将其放在
html2canvas（…
）之前？
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");
                        }
                    });
                });