如何使用jsPDF将图像居中适配页面？

Question

我正在使用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

Answer 1

这个问题需要一些老派的 CSS 技巧。我想起来以前我们怎样用 position: absolute; 将图像居中对齐，计算图片宽度和画布宽度，再将其取反并除以2。在这里使用同样的技术非常有效！

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

- Amruth Pillai

---

如果我想在X轴两侧获得边距，我该怎么做？ - Nikhil Gaur

Answer 2

const pageWidth = doc.internal.pageSize.width;
const pageHeight = doc.internal.pageSize.height;

这是一个修改函数 "getWidth()" 的替代方法。

- Cristian David Norea Saldarria