如何在使用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文件中有小图片附加在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');

有没有一种方法可以根据静态高度将页面分割，从特定位置分割图像？

- Manmeet Khurana

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");
      });

- Abhishek

---

在你的第一步中，你重复了两次高度。 - undefined

@N.Dias 已修复，感谢。 - undefined

pdf.addImage(Header, "JPEG", 0, 0, 400, 400) 中的 header 是什么？@N.Dias - undefined

对我来说很有效！干得好！ - undefined

@AjithKumar兄弟，评论或忽略以下带有标题的行： // pdf.addImage(Header, "JPEG", 0, 0, 400, 400); - undefined

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 忽略导出内容。

- Ved Prakash