Manual pagination of PDF : html or html2canvas

[dshakya]

I create a Nodelist of sections in html by using querySelectAll and then iterate through it to generate image. I then create pages depending on the element height, finally saving it as PDF. It works well but it takes a long time. I used this method instead of the html plugin because it cut off the images and text between pages and I couldn't find documentation on how to use manual pagination with the html plugin. I can just turn the automatic pagination off but then the layout goes everywhere.

Because canvas2html creates iFrame in the DOM while converting to PDF, it takes a long time as I have about 20 sections to convert to image, add to doc and then save it. Is there a way to improve this workflow for faster rendering of the pdf? I couldn't use the web worker as there is DOM manipulation and it freezes the main UI thread while generating the PDF. I kind of got away by using the setTimeout to show the indeterminate progress bar but still very slow.

Is there a way to handle pagination a bit better using the manual way or while using the html plugin?

function generatePDF() {
  const doc = new jsPDF('p', 'mm', 'a4', true);
  const reportContainer = document.querySelector('#Report');
  const elements = reportContainer.querySelectorAll('section'); 
  let currentPage = 1;
  let yPos = 10;

  var margins = {
    top: 10,
    bottom: 10,
    left: 10,
    width: 210,
  };

  let pageno = 0;

  //Add header information
  html2canvas(elements[0] as HTMLElement, { scale: 3 }).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    var width = margins.width - margins.left * 2;
    var height = (canvas.height * width) / canvas.width;
    doc.addImage(imgData, 'PNG', margins.left, yPos, width, height);
    yPos += height + 5;

    //Add report content
    setTimeout(() => {
      for (let i = 1; i < elements.length; i++) {
        html2canvas(elements[i] as HTMLElement, { scale: 3 }).then((canvas) => {
          const imgData = canvas.toDataURL('image/png');
          var width = margins.width - margins.left * 2;
          var height = (canvas.height * width) / canvas.width;

          if (yPos + height > 297) {
            doc.setFontSize(10);
            doc.text('Page ' + String(pageno + 1), margins.width / 2, 292, {
              align: 'center',
            });
            pageno++;

            doc.addPage();
            yPos = margins.top;
            currentPage++;
          }

          doc.addImage(imgData, 'PNG', margins.left, yPos, width, height); 
          yPos += height + 5;

          if (i === elements.length - 1) {
            doc.setFontSize(10);
            doc.text('Page ' + String(pageno + 1), margins.width / 2, 292, {
              align: 'center',
            });
            doc.save('Report.pdf');
          }
        });
      }
    }, 1000);
  });
}

[susu-sama]

dalao，怎么开启分页呀

[susu-sama]

function handleClick() {
deviceReportsLazy.value = true
const exprtCanvas = exportMe.value
domToPng(exprtCanvas, {}).then(canvas => {
const img = new Image()
img.src = canvas
let contentWidth, contentHeight
img.onload = function () {
contentWidth = img.width
contentHeight = img.height
const pageHeight = (contentWidth / 595.28) * 1000
let leftHeight = contentHeight
let position = 0
const imgWidth = 555.28
const imgHeight = (555.28 / contentWidth) * contentHeight
const pdf = new jsPDF('', 'pt', 'a4', true)
if (leftHeight < pageHeight) {
pdf.addImage(canvas, 'JPEG', 20, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
pdf.addImage(canvas, 'JPEG', 20, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save(${t('health.reportName')}.pdf)
ElNotification({
title: t('common.form.tip'),
message: t('common.text.success'),
type: 'success',
duration: 2000
})
deviceReportsLazy.value = false
}
})
}

[susu-sama]

我是这样写的，但是内容会被截断，有没有办法可以使动态的div容器不被截断

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.