如何使用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

首先设置 doc 实例接受单位为“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 来忽略导出的内容。

Answer 3

как настроить отступы от верха каждой последующей страницы？