jsPDF - Как сгенерировать PDF со всеми страницами формата A4 - PullRequest
Новая
       24

jsPDF - Как сгенерировать PDF со всеми страницами формата A4

0 голосов
/ 13 июля 2020

Я использую библиотеку jsPDF для загрузки нескольких страниц PDF, которые создаются из HTML div. Мне нужен размер PDF в A4.

Я столкнулся с проблемами ниже:

  1. Кажется, только первая страница имеет размер A4, другие страницы не имеют размер A4 ( более широкие страницы).
  2. Даже первая страница кажется формата А4; он не помещается в контейнер (содержимое с правой стороны отрезается от контейнера).
  3. И содержимое, которое, как ожидается, появится на второй странице, не входит в сгенерированный PDF.

Ниже код JS. 

var HTML_Width = $("#cdpage").width();
var HTML_Height = $("#cdpage").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width+(top_left_margin*2);
var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
                 
var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
               
html2canvas($("#cdpage")[0],{allowTaint:true}).then(function(canvas) {
  canvas.getContext('2d');
       
  var imgData = canvas.toDataURL("image/jpeg", 1.0);
  var pdf = new jsPDF("p", "pt", "a4");
  pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
       
  for (var i = 1; i <= totalPDFPages; i++) { 
    pdf.addPage(PDF_Width, PDF_Height);
    pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
  }
   
  pdf.save("HTML-Document.pdf");
}

И я знаю, что фрагмент кода var pdf = new jsPDF("p", "pt", "a4"); предназначен для установки размера A4, но он не работает.

Ниже HTML DIV, из которого создается PDF-файл. 

<div id="cdpage">
   <div id="cdpage1"></div>
   <div id="cdpage4"></div>
   <div id="cdpage5"></div>
</div>

1 Ответ

1 голос
/ 13 июля 2020

попробуйте использовать определенный размер a4 

var pdf = new jsPDF('p','mm',[297, 210]);

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

...