Я делаю очень простое приложение для реагирования с минимумом контента.
index.js:
<div className="App">
<div id="printable-div">
<h1>Generate PDF</h1>
<p>Create a screenshot from the page, and put it in a PDF file.</p>
<p style={{ color: "red" }}>
*Open this page in new window and press the button.
</p>
</div>
<br />
<button id="print" onClick={printPDF}>
PRINT
</button>
</div>
Где здесь будет напечатан div с идентификатором printable-div.
Я также применил CSS для этого, например,
#printable-div {
border: 2px solid #000;
padding: 20px;
}
Но при нажатии на кнопку происходит загрузка PDF-файла, тогда как при открытии PDF-файла граница не выравнивается должным образом.
Также здесь порядок должен быть на странице, но тогда как он применяется только к div.
Используемые библиотеки:
- ›jsPdf
- ›html2canvas
И код, выполняемый при нажатии на кнопку печати, выглядит следующим образом:
const printPDF = () => {
const domElement = document.getElementById("printable-div");
html2canvas(domElement).then((canvas) => {
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPdf();
pdf.addImage(imgData, "JPEG", 0, 0);
pdf.save(`${new Date().toISOString()}.pdf`);
});
};
Полный рабочий пример:
Может ли кто-нибудь смиренно помочь мне добиться результата, когда граница будет правильно выровнена по всей странице? Ничего страшного, если используемые библиотеки нужно заменить на другие альтернативы ..
Требование:
Вся страница должна иметь видимую границу со всеми сторонами равными интервалами, а содержимое должно находиться внутри границы.
