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

Question

在我的html页面中有一个div元素，其中包含2-3个详细信息标签（默认情况下所有详细信息标签将处于折叠模式），其中包含表格。我正在尝试将此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.i想要将整个内容放在pdf中。

转换到画布时有没有办法改变扩展这个细节？

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>