canvas2 html и jsPDF - файл слишком сильно увеличен при экспорте - PullRequest
Новая
       7

canvas2 html и jsPDF - файл слишком сильно увеличен при экспорте

0 голосов
/ 10 апреля 2020

Я использую html2canvas и jsPDF для экспорта моей страницы в PDF-документ. Поскольку страница имеет длинный контент, я использую этот код для ее создания: 

const onExportClick = (e) => {
   e.preventDefault();
   const quotes = document.body;
   html2canvas(quotes).then(
      (canvas) => {
         //! MAKE YOUR PDF
         const pdf = new jsPDF("p", "pt", "A4");

         for (let i = 0; i <= quotes.clientHeight / 980; i++) {
            //! This is all just html2canvas stuff
            const srcImg = canvas;
            const sX = 0;
            const sY = 980 * i; // start 980 pixels down for every new page
            const sWidth = 900;
            const sHeight = 980;
            const dX = 0;
            const dY = 0;
            const dWidth = 900;
            const dHeight = 980;

            const onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute("width", 900);
            onePageCanvas.setAttribute("height", 980);
            const ctx = onePageCanvas.getContext("2d");
            // details on this usage of this function:
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(
               srcImg,
               sX,
               sY,
               sWidth,
               sHeight,
               dX,
               dY,
               dWidth,
               dHeight
            );

            // document.body.appendChild(canvas);
            const canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            const width = onePageCanvas.width;
            const height = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
               pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i + 1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, "PNG", 0, 0, width, height);
         }
         //! after the for loop is finished running, we save the pdf.
         pdf.save("Test.pdf");
      }
   );
};

Проблема в том, что документ выглядит следующим образом (например, первые 2 страницы из PDF): enter image description here enter image description here

На сайте это так (материал с первых 2 страниц из PDF):

enter image description here

enter image description here

Так что в общем-то это слишком сильно увеличено. Как мне сделать так, чтобы он помещался на странице PDF?

1 Ответ

0 голосов
/ 10 апреля 2020

Вы инициализировали jsPDF для использования 'pt' по умолчанию 

const pdf = new jsPDF("p", "pt", "A4");

Но полученное изображение в пикселях. А приведенная ниже строка кода обрабатывает ширину и высоту как pt (точки)

pdf.addImage (canvasDataURL, "PNG", 0, 0, ширина, высота); 

1 Point = 1.333333 Pixel
1 px =   0.75 point

Надеюсь, это поможет: 

pdf.addImage(canvasDataURL, "PNG", 0, 0, width * 0.75, height * 0.75);

Так что в вашем случае изображение становится больше. Вам нужно просто умножить ширину / высоту (в пикселях) на 0,75, чтобы получить размер в точках. Вы также должны учитывать дополнительные поля, которые вы даете вокруг изображения, и вычитать его и преобразовывать это число в пиксели, иначе изображение может выглядеть обрезанным.

Справочник по API: https://artskydj.github.io/jsPDF/docs/module-addImage.html# ~ addImage

Параметры: 

width   number  
width of the image (in units declared at inception of PDF document)

height  number  
height of the Image (in units declared at inception of PDF document)

Вот в чем я проблема. Может быть, вы можете попробовать. Надеюсь, это поможет!

...