温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to fit an image in the center of a page using jsPDF?
html2canvas javascript jspdf math positioning

javascript - 如何使用jsPDF使图像适合页面中心?

发布于 2020-06-17 17:10:11

使用html2canvas和jsPDF,我正在尝试打印DIV屏幕上显示的全部内容,到目前为止,我已经做到了

const printAsPdf = () => {
  html2canvas(pageElement.current, {
    useCORS: true,
    allowTaint: true,
    scrollY: -window.scrollY,
  }).then(canvas => {
    const image = canvas.toDataURL('image/jpeg', 1.0);
    const doc = new jsPDF('p', 'px', 'a4');
    const pageWidth = doc.internal.pageSize.getWidth();
    const pageHeight = doc.internal.pageSize.getHeight();

    const widthRatio = pageWidth / canvas.width;
    const heightRatio = pageHeight / canvas.height;
    const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;

    const canvasWidth = canvas.width * ratio;
    const canvasHeight = canvas.height * ratio;

    doc.addImage(image, 'JPEG', 0, 0, canvasWidth, canvasHeight);
    doc.output('dataurlnewwindow');
  });
};

这将用我选择的图像/画布填充页面。但是我无法在页面上对齐图像死点。

查看更多

提问者
Amruth Pillai
被浏览
4
Amruth Pillai 2020-03-31 22:31

这个问题需要一些老式的CSS技巧。我回想起我们过去如何将图像居中position: absolute;,然后计算图像宽度和画布宽度,取反然后将其除以一半。在这里使用相同的技术就像一个魅力!

const marginX = (pageWidth - canvasWidth) / 2;
const marginY = (pageHeight - canvasHeight) / 2;

因此,完整的功能如下所示:

const printAsPdf = () => {
  html2canvas(pageElement.current, {
    useCORS: true,
    allowTaint: true,
    scrollY: -window.scrollY,
  }).then(canvas => {
    const image = canvas.toDataURL('image/jpeg', 1.0);
    const doc = new jsPDF('p', 'px', 'a4');
    const pageWidth = doc.internal.pageSize.getWidth();
    const pageHeight = doc.internal.pageSize.getHeight();

    const widthRatio = pageWidth / canvas.width;
    const heightRatio = pageHeight / canvas.height;
    const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;

    const canvasWidth = canvas.width * ratio;
    const canvasHeight = canvas.height * ratio;

    const marginX = (pageWidth - canvasWidth) / 2;
    const marginY = (pageHeight - canvasHeight) / 2;

    doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight);
    doc.output('dataurlnewwindow');
  });
};