如何使用HTML2Canvas和jspdf添加图像后拆分页面

Question

使用html2canvas和JsPDF将HTML转换为pdf，并使用以下代码生成代码这段代码将把div的完整HTML转换为单个图像，并在pdf中显示为单个页面。

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
htmltoPDF()
{
// parentdiv is the html element which has to be converted to PDF
html2canvas(document.querySelector("#parentdiv")).then(canvas => {

var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);

var imgData  = canvas.toDataURL("image/jpeg", 1.0);
pdf.addImage(imgData,0,0,canvas.width, canvas.height);
pdf.save('converteddoc.pdf');

});
}

对于拆分代码，我使用了以下代码，将页面拆分为多个页面，但没有正确拆分空间，因为我的pdf附带了小图像。

var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
enter code here
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save( 'file.pdf');

有没有任何方法可以根据从特定位置分割图像的静态高度来分割页面？

Answer 1

1. 首先我们必须限制画布图像的高度和宽度

html2canvas(divToPrint, {
width: 2480,
height: 3508
}).then((canvas) => {
})

2. 然后我们可以很容易地分割这个画布图像

html2canvas(divToPrint, {
width: 2480,
height: 3508
}).then((canvas) => {
let imgWidth = 400;
let pageHeight = 480;
let imgHeight =
((canvas.height * imgWidth) / 2454)*1.24;
var heightLeft = imgHeight;
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF({
orientation: "p",
unit: "mm",
format: [400, 480],
});
let position = 0;
pdf.setFillColor(248);
pdf.rect(0, 0, 400, 480, "F");
pdf.addImage(Header, "JPEG", 0, 0, 400, 400);
pdf.setFontSize(35);
pdf.text('SMRF 360', 10, 420);
pdf.setFontSize(15);
pdf.text(`Feedback report`, 10, 433)
pdf.text('March 2021', 10, 440)
pdf.addPage();
pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
pdf.addPage();
pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
pdf.save("Result.pdf");
});

Answer 2

首先将单据实例设置为接受单位为"pt"。张贴这篇文章的下一步是检查图像是否大于页面大小，如果是，图像将跨越多个页面，因为我们有docHeight，我们将能够获得当前页面中包含的部分图像。现在，对下一页重复此操作(对于下一页，剩余的图像会再次变大(。代码如下(这里，我希望图像只占页面宽度的0.8，高度相应调整(：

//Read Canvas to be exported
const appRolesElement = document.getElementById('app-roles-element');
const appRolesCanvas = await html2canvas(appRolesElement, { onclone: function (document) {
//Different style requirement for export
document.querySelectorAll('.right-wrapper').forEach(el => {
el.style.marginLeft = '0px';
})
}});
const doc = new jsPDF({
compress: true,
orientation: 'p',
unit: 'pt',
format: 'a4'
});
var docWidth = doc.internal.pageSize.getWidth();
var docHeight = doc.internal.pageSize.getHeight();
let heightInPlace = 0;
let appRolesImageDisplayHeight = getDisplayHeight(appRolesCanvas.height, appRolesCanvas.width, docWidth*0.8);
let appRolesIterationCounter = 0;
let appRolesSourceClipStartY = 0;
//Keep checking if a new page is required
while(appRolesImageDisplayHeight > 0) {
if(appRolesIterationCounter > 0) {
doc.addPage();
heightInPlace = 10;
}
++appRolesIterationCounter;
const remainingHeightInPage = docHeight - heightInPlace;
const sourceHeightToBeDisplayed = getSourceHeight(remainingHeightInPage, appRolesCanvas.width, docWidth);
const clippedImage = await convertURIToImageData(appRolesImage, appRolesCanvas.width, sourceHeightToBeDisplayed, appRolesSourceClipStartY);
doc.addImage(clippedImage, 'JPEG', 10, heightInPlace, docWidth * 0.8, remainingHeightInPage * 0.8);
heightInPlace += (remainingHeightInPage * 0.8) + 5;
appRolesImageDisplayHeight = appRolesImageDisplayHeight - remainingHeightInPage;
appRolesSourceClipStartY += sourceHeightToBeDisplayed;
}
doc.save("export.pdf");

const getDisplayHeight = (sourceHeight, sourceWidth, displayWidth) => {
return (displayWidth/sourceWidth)*sourceHeight;
};
const getSourceHeight = (displayHeight, sourceWidth, displayWidth) => {
return displayHeight*(sourceWidth/displayWidth);
}

此外，请使用属性data-html2canvas-ignore来忽略导出中的内容。