Я пытаюсь экспортировать веб-страницу с HTML/CSS и около 19 диаграмм в многостраничный формат PDF.
Пока он может экспортировать всю веб-страницу на 1 непрерывную страницу, однако при печати она будет уменьшена, чтобы уместить только 1 страницу.
Ниже приведен javascript для экспорта PDF, настройки размера бумаги, полей и принудительного разрыва страницы во всех элементах div, расположенных между областями диаграммы.
Нужно ли что-то декларировать в самой JS диаграмме кендо?
$("#export-pdf").click(function () {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".content-wrapper"))
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "a4",
margin: "2cm",
// Page Break divs between each partial with a kendo chart
forcePageBreak: ".page-break"
});
})
.done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "exportPDF")).pdf",
});
});
С приведенным выше JS он показывает что-то действительно странное:
1/4 верхней части веб-страницы увеличена и обрезана до размера страницы. Выпускается только 1 страница.
Мы пытаемся сделать так, чтобы функция экспорта кендо в pdf брала все в «контент-обертке» и помещала его на несколько страниц размером с букву, чтобы его можно было распечатать и прочитать.
Любая помощь или понимание приветствуется!
У меня были "pageSize" "margin" и "forcePageBreak" в неправильном разделе - для работы они должны были быть в событии drawDom.
Исправленный код:
$("#export-pdf").click(function () {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM(".content-wrapper", {
paperSize: "a4",
margin: "2cm",
// Page Break divs between each partial with a kendo chart
forcePageBreak: ".page-break"
})
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group);
})
.done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "exportPDF")).pdf",
});
});