Как разместить изображение в центре страницы с помощью jsPDF? - PullRequest
Новая
       22

Как разместить изображение в центре страницы с помощью jsPDF?

1 голос
/ 31 марта 2020

Используя 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');
  });
};

Это заполняет страницу изображением / холст по моему выбору. Но я не могу выровнять мертвую точку изображения на странице.

1 Ответ

1 голос
/ 31 марта 2020

Эта проблема потребовала некоторых 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');
  });
};
...