Я использую метод jsPDF html
для создания PDF-файла для некоторых html, состоящих из нескольких абзацев p
, каждый из которых p
содержит слова от 50 до 500. PDF-файл создается правильно с использованием определенных мной стилей. Единственная проблема, с которой я сталкиваюсь, - это когда содержимое тегов p
переполняется на новую страницу в PDF, отсекая части текста, как можно увидеть здесь:
Чтобы противостоять этому, мне нужно ввести addPage
в свой код, чтобы вставить «разрыв страницы» там, где я sh. Вот пример addPage
, который работает с функцией jsPDF text
:
var doc = new jsPDF('p', 'pt', 'letter');
doc.text(20, 20, 'first text');
doc.addPage();
doc.text(20, 20, 'second text');
doc.addPage();
doc.text(20, 20, 'third text');
doc.save();
Я хочу сделать то же самое для html
, и вот код, который я использовал:
var doc = new jsPDF('p', 'pt', 'letter');
doc.html($("#p1")[0], {
callback: function (doc) {
doc.addPage('letter', 'p');
doc.html($("#p2")[0], {
callback: function (doc) {
doc.save();
}
});
}
});
Приведенное выше создает PDF-файл с содержанием из 2 страниц по желанию. Но содержимое, которое должно быть на второй странице, находится на первой, поверх содержимого первой страницы. Другими словами, содержимое #p2
вставляется поверх содержимого #p1
.
Вот фрагмент кода, но обратите внимание, SO выдает ошибку перекрестного происхождения при попытке запустите код, так что вам нужно будет запустить ниже SO:
function wrap() {
var doc = new jsPDF('p', 'pt', 'letter');
doc.html($("#p1")[0], {
callback: function(doc) {
doc.addPage('letter', 'p');
doc.html($("#p2")[0], {
callback: function(doc) {
doc.save();
}
});
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/html2canvas.js"></script>
<button id="btn" onclick="wrap()">Test</button>
<div id="lipsum">
<p id="p1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed risus at orci elementum consequat. Suspendisse laoreet rhoncus dignissim. Aliquam a ultrices orci, in elementum nibh. Aliquam mollis erat at vehicula pellentesque. Nunc suscipit, leo
at convallis lobortis, odio ipsum euismod sapien, auctor accumsan velit eros non risus. Cras sagittis nisi non orci finibus porta. Sed finibus ac eros eu tincidunt. Nam viverra egestas augue vestibulum elementum. Suspendisse convallis felis sodales,
ornare neque ut, elementum dui. Mauris ac orci mattis, tristique nisi quis, ultricies urna. In tincidunt, dolor vitae euismod mattis, lorem arcu placerat velit, quis auctor est est et sem. Aenean convallis finibus posuere. Sed feugiat orci a lacinia
efficitur. Ut semper, purus quis convallis vehicula, mi risus rhoncus arcu, et feugiat neque turpis non tellus.
</p>
<p id="p2">
Mauris dapibus felis leo, vitae vestibulum purus feugiat sit amet. Fusce ac dapibus nunc. Etiam congue mi neque. Maecenas eget blandit turpis. Suspendisse volutpat, urna eu facilisis congue, elit felis faucibus velit, venenatis semper sem sem ut ante.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent blandit congue sapien. Curabitur non fermentum felis, sit amet auctor nunc. Cras id tellus nunc.
</p>
<p id="p3">
In lacinia lectus nec quam dapibus eleifend. Phasellus iaculis eget massa non aliquam. Cras interdum gravida hendrerit. Suspendisse rhoncus pretium erat non malesuada. Fusce sit amet finibus est. Phasellus quis dapibus orci. Nunc iaculis felis odio, et
dictum leo mollis sed. Morbi ultrices turpis at mi pellentesque, sit amet consectetur tortor volutpat. Mauris ac nunc ac nunc pellentesque lacinia. Duis at ligula tristique, maximus sapien sit amet, pulvinar neque.
</p>
</div>
Обратите внимание, что здесь важна версия, используемая для html2canvas js. См. здесь для получения дополнительной информации.