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

Question

在我的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创建代码

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文件中。

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

Answer 1

<details open>

<details>具有[open]属性。

演示1（JavaScript）：

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

---

演示2（jQuery）：

-在.each() <details>
-上设置其[open]属性{ {1}}使用true方法。

---

在调用.attr()之前先运行任一版本。

---

演示1

html2canvas()

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;
}

---

演示2

<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>

$('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;
}