• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

jsPDF-如何生成A4大小的所有页面的PDF

JavaScript cps12345 10个月前 (07-17) 366次浏览 0个评论

我正在使用jsPDF库下载PDF从中创建的多个页面HTML div。我想要PDF的A4大小。

我面临以下问题,

  1. 似乎只有第一页是A4尺寸,其他页面不是A4尺寸(较宽的页面)。
  2. 甚至第一页似乎都是A4尺寸;它不适合放入容器中(右侧的内容物已从容器上切下)。
  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>

解决方案

尝试使用特定尺寸的A4

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

您必须 登录 才能发表评论!