#css #node.js #pdf #height #width
Вопрос:
Я создаю PDF-файл с помощью nodejs с помощью pdf-creator-узла, и я добился успеха. Мое требование состоит в том, что мне нужно создать PDF-файл с высотой X шириной = 926 пикселей X 1296 пикселей. Я не знаю, какой css я должен написать, чтобы создать этот размерный pdf. прямо сейчас, если я установлю div или высоту и ширину тела с вышеупомянутым размером, я получу 3 страницы
это то, что я пытался
@page {
width: 1296px;
height: 926px;
}
<div
class="parent-div"
style="
width: 1296px;
height: 926px;
background-color: #faf0e6;
border: 1px solid red;
"
></div>
Ответ №1:
jsPDF может использовать плагины. Для того, чтобы он мог печатать HTML, вам необходимо включить определенные плагины и, следовательно, выполнить следующие действия:
- Перейти к https://github.com/MrRio/jsPDF и скачайте последнюю версию.
- Включите в свой проект следующие сценарии:
jspdf.js jspdf.plugin.from_html.js jspdf.plugin.split_text_to_size.js jspdf.plugin.standard_fonts_metrics.js
Если вы хотите игнорировать определенные элементы, вы должны пометить их идентификатором, который затем можно игнорировать в специальном обработчике элементов jsPDF. Поэтому ваш HTML-код должен выглядеть следующим образом:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Затем вы используете следующий код JavaScript, чтобы открыть созданный PDF-файл во всплывающем окне:
var doc = new jsPDF();
var elementHandler = {
#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
**Для меня это создало красивый и аккуратный PDF-файл, который включал только строку «распечатать это в pdf».
Пожалуйста, обратите внимание, что специальные обработчики элементов имеют дело только с идентификаторами в текущей версии, что также указано в выпуске GitHub. В нем говорится:**
Поскольку сопоставление выполняется с каждым элементом в дереве узлов, моим желанием было сделать это как можно быстрее. В этом случае это означало «Совпадают только идентификаторы элементов». Идентификаторы элементов по-прежнему выполняются в стиле jQuery «#id», но это не означает, что поддерживаются все селекторы jQuery.
Поэтому замена «#ignorePDF» на селекторы классов, такие как». ignorePDF», не сработала для меня. Вместо этого вам придется добавить один и тот же обработчик для каждого элемента, который вы хотите игнорировать, например:
var elementHandler = {
#ignoreElement': function (element, renderer) {
return true;
},
#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
Из примеров также указано, что можно выбрать теги, такие как «a» или «li». Хотя это может быть немного чересчур ограничительно для большинства случаев использования:
Мы поддерживаем специальные обработчики элементов. Зарегистрируйте их с помощью селектора идентификаторов в стиле jQuery для идентификатора или имени узла. («#iAmID», «div», «span» и т.д.) В настоящее время нет поддержки для любого другого типа селекторов (класса, соединения).
Одна очень важная вещь, которую следует добавить, — это то, что вы потеряете всю информацию о своем стиле (CSS). К счастью, jsPDF способен красиво форматировать h1, h2, h3 и т.д., Чего было достаточно для моих целей. Кроме того, он будет печатать текст только в текстовых узлах, что означает, что он не будет печатать значения текстовых областей и тому подобное. Пример:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>