typescript 生成多页PDF时画布被剪切

ozxc1zmp  于 2023-01-06  发布在  TypeScript
关注(0)|答案(1)|浏览(125)

我尝试使用jsPDF和html2canvs从一个HTML页面生成一个PDF。在项目的一个部分运行良好,PDF是根据需要生成的。另一个部分,虽然它太大,画布在文档底部得到削减。我曾试图实现一个多页面的解决方案,但是,图像仍然得到削减和数据没有显示。
我尝试的解决方案是这一个,但无济于事:

const data = document.getElementById('pdfPage_');
html2canvas(data).then((canvas:any) => {
  const imgWidth = 208;
  const pageHeight = 295;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;
  heightLeft -= pageHeight;
  const doc = new jspdf('p', 'mm');
  doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
    heightLeft -= pageHeight;
  }
  doc.save('Downld.pdf');
});

作为参考,我使用Angular 6
PDF可读,所有元素均正确显示。

8yoxcaq7

8yoxcaq71#

这并不是一个完美的解决方案,因为页面看起来仍然是被裁剪的,但至少所有的数据在下一页上都是可见的。它包括在while循环中移除多余的像素:

const data = document.getElementById('pdfPage_');

const pageOffsetY = 24;

html2canvas(data).then((canvas:any) => {
  const imgWidth = 208;
  const pageHeight = 295;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;
  heightLeft -= pageHeight;
  const doc = new jspdf('p', 'mm');
  doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight - pageOffsetY;
    doc.addPage();
    doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
    heightLeft -= pageHeight;
  }
  doc.save('Downld.pdf');
});

相关问题