如何在转换为canvas时打开details标签

Question

在我的html页面中有一个div元素，它包含2-3个details标签(默认情况下，所有的details标签都将处于折叠模式)，里面有表格。我正在尝试将这个html div内容转换为canvas.with，我正在创建一个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创建代码

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]属性。

演示1 (JavaScript):

• 将所有<details>收集到NodeList中，然后通过带有for...of循环的新数组将其转换为for...of。
• 在每次迭代中使用NodeList方法切换每个<details> [open]属性。

演示2 (jQuery):

• On .each() .each() [open] attribute true using .attr() method。

当然，在调用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>

​