как сделать метку деталей открытой при конвертации в canvas

Question

На моей html-странице есть элемент div, который содержит 2-3 тега подробностей (по умолчанию все теги подробностей будут находиться в свернутом режиме) с таблицами внутри него. Я пытаюсь преобразовать это HTML-содержимое div в 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>