Multipage 带HTML渲染器的jsPDF多页PDF

我在我的站点中使用jsPDF生成PDF。但现在我有多个div要在一个PDF中打印。这可能需要2到3页

例如：

内容
内容
内容

我的JS代码

• 这是可行的，但并不像我预期的那样，它添加了一部分内容（不能包含在多个页面中）
• 它删除了诸如br、h1等html标记

函数formtoPDF（）{
jsPDF.API.mymethod=函数（）{
//“this”将引用到内部API对象。请参阅jsPDF源代码
//，因此您可以参考以下内置方法：
//这一行（……）
//本文件（……）
};
var doc=new jsPDF（）；
doc.mymethod（）；
var pdfPart1=jQuery（'#genPDFpart1'）；
var pdfPart2=jQuery（“.ltineral”）；
var pdfPart3=jQuery（“domElementHTML”）；
变量specialElementHandlers={
“#loadVar”：函数（元素、渲染器）{
返回true；
}
};
doc.fromHTML（pdfPart1.html（）+pdfPart3.html（）+pdfPart3.html（），15,15{
“宽度”：170，
“elementHandlers”：specialElementHandlers
});
文件输出（'save'，'Download.pdf'）；
}

---

能给我一个解决办法吗。提前感谢各位朋友。

我也有同样的工作问题。在MrRio github中搜索时，我发现：

基本上，在添加新内容之前，您必须检查实际页面大小

doc = new jsPdf();
...
pageHeight= doc.internal.pageSize.height;

// Before adding new content
y = 500 // Height position of new content
if (y >= pageHeight)
{
  doc.addPage();
  y = 0 // Restart height position
}
doc.text(x, y, "value");

---

下面是我的代码，但问题是文档没有拆分以在新页面中显示文档的其他部分

请改进此代码

<script type='text/javascript'>
$(document).on("click", "#btnExportToPDF", function () {
    var table1 =
    tableToJson($('#table1')[0]),
    cellWidth =42,
    rowCount = 0,
    cellContents,
    leftMargin = 2,
    topMargin = 12,
    topMarginTable =5,
    headerRowHeight = 13,
    rowHeight = 12,
    l = {
        orientation: 'p',
        unit: 'mm',
        format: 'a3',
        compress: true,
        fontSize: 11,
        lineHeight: 1,
        autoSize: false,
        printHeaders: true
    };

    var doc = new jsPDF(l,'pt', 'letter');

    doc.setProperties({
        title: 'Test PDF Document',
        subject: 'This is the subject',
        author: 'author',
        keywords: 'generated, javascript, web 2.0, ajax',
        creator: 'author'
    });
    doc.cellInitialize();

    $.each(table1, function (i, row)
    {
        rowCount++;

        $.each(row, function (j, cellContent) {

            if (rowCount == 1) {
                doc.margins = 1;
                doc.setFont("Times New Roman");
                doc.setFontType("bold");
                doc.setFontSize(11);

                doc.cell(leftMargin, topMargin, cellWidth, headerRowHeight, cellContent, i)
            }
            else if (rowCount == 2) {

                doc.margins = 1;
                doc.setFont("Times ");
                doc.setFontType("normal");
                // or for normal font type use ------ doc.setFontType("normal");

                doc.setFontSize(11);

                doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i);
            }
            else {

                doc.margins = 1;
                doc.setFont("Times  ");
                doc.setFontType("normal ");
                doc.setFontSize(11);
                doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i);
                // 1st=left margin    2nd parameter=top margin,     3rd=row cell width      4th=Row height
            }
        })
    })
    doc.save('sample Report.pdf');
});

function tableToJson(table) {

    var data = [];

    // first row needs to be headers
    var headers = [];

    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
    }

    // go through cells
    for (var i=1; i<table.rows.length; i++) {

        var tableRow = table.rows[i];

        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {
            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
        }

        data.push(rowData);
    }

    return data;
}
</script>

$（文档）。在（“单击”上，“#btnExportToPDF”，函数（）{
var表1=
tableToJson（$（'#table1'）[0]），
单元宽度=42，
行计数=0，
细胞内容物，
leftMargin=2，
topMargin=12，
topMarginTable=5，
headerRowHeight=13，
行高=12，
l={
方向：“p”，
单位：毫米，
格式：“a3”，
是的，
尺寸：11，
线宽：1，
自动调整大小：false，
打印头：true
};
var doc=新的jsPDF（l，'pt，'letter'）；
doc.setProperties({
标题：“测试PDF文档”，
主题：“这就是主题”，
作者：'作者'，
关键词：“生成的、javascript、web 2.0、ajax”，
创建者：“作者”
});
doc.cellInitialize（）；
$。每个（表1，函数（i，行）
{
行计数++；
$.each（行，函数（j，cellContent）{
如果（行计数==1）{
单据页边距=1；
setFont文件（“新罗马时代”）；
文件setFontType（“粗体”）；
文件setFontSize（11）；
文档单元格（左边距、上边距、单元格宽度、标题宽度、单元格内容、i）
}
else if（rowCount==2）{
单据页边距=1；
setFont文件（“时代”）；
文件setFontType（“正常”）；
//或用于正常字体类型使用------doc.setFontType（“正常”）；
文件setFontSize（11）；
文档单元格（左边距、上边距、单元格宽度、行高、单元格内容、i）；
}
否则{
单据页边距=1；
setFont文件（“时代”）；
文件setFontType（“正常”）；
文件setFontSize（11）；
文档单元格（左边距、上边距、单元格宽度、行高、单元格内容、i）；
//第一个=左边距第二个参数=上边距，第三个=行单元格宽度第四个=行高度
}
})
})
doc.save（'sample Report.pdf'）；
});
函数tableToJson（表）{
var数据=[]；
//第一行必须是标题
var头=[]；
对于（var i=0；i您可以同时使用plugin和jsPDF。处理顺序：
html到png和png到pdf

示例代码：

jQuery('#part1').html2canvas({
    onrendered: function( canvas ) {
        var img1 = canvas.toDataURL('image/png');
    }
});
jQuery('#part2').html2canvas({
    onrendered: function( canvas ) {
        var img2 = canvas.toDataURL('image/png');
    }
});
jQuery('#part3').html2canvas({
    onrendered: function( canvas ) {
        var img3 = canvas.toDataURL('image/png');
    }
});
var doc = new jsPDF('p', 'mm');
doc.addImage( img1, 'PNG', 0, 0, 210, 297); // A4 sizes
doc.addImage( img2, 'PNG', 0, 90, 210, 297); // img1 and img2 on first page

doc.addPage();
doc.addImage( img3, 'PNG', 0, 0, 210, 297); // img3 on second page
doc.save("file.pdf");

自动不将数据拆分为多页。您可以手动拆分

如果您的（行数*行高）>420mm（A3高度，单位为mm），请添加新的页面功能。（抱歉，我无法在不运行的情况下编辑您的代码）
添加新页面左边距后，topMargin=0；（重新开始）
我在你的代码中添加了示例代码。我希望它是正确的

else {
    doc.margins = 1;
    doc.setFont("Times  ");
    doc.setFontType("normal ");
    doc.setFontSize(11);
    if ( rowCount * rowHeight > 420 ) {
        doc.addPage();
        rowCount = 3; // skip 1 and 2 above
    } else {
        // now rowcount = 3 ( top of new page for 3 )
        // j is your x axis cell index ( j start from 0 on $.each function ) or you can add cellCount like rowCount and replace with
        // rowcount is your y axis cell index
        left = ( ( j ) * ( cellWidth + leftMargin );
        top = ( ( rowcount - 3 ) * ( rowHeight + topMargin );
        doc.cell( leftMargin, top, cellWidth, rowHeight, cellContent, i);
        // 1st=left margin    2nd parameter=top margin,     3rd=row cell width      4th=Row height
    }
}

您可以直接将html无损地转换为pdf。
下面是一个使用html2canvas和jspdf的示例，尽管如何生成画布并不重要——我们将使用画布的高度作为
for循环
的断点，在该循环中创建一个新页面并向其添加内容

在for循环之后，将保存pdf

function makePDF() {

       var quotes = document.getElementById('container-fluid');
       html2canvas(quotes)
      .then((canvas) => {
            //! MAKE YOUR PDF
            var pdf = new jsPDF('p', 'pt', 'letter');

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

                window.onePageCanvas = document.createElement("canvas");
                onePageCanvas.setAttribute('width', 900);
                onePageCanvas.setAttribute('height', 980);
                var 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);
                var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

                var width         = onePageCanvas.width;
                var 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', 20, 40, (width*.62), (height*.62));

            }
            //! after the for loop is finished running, we save the pdf.
            pdf.save('Test.pdf');
        }
      });
    }

函数makePDF（）{
var quotes=document.getElementById（'container-fluid'）；
html2canvas（引用）
.然后（（画布）=>{
//！制作你的PDF
var pdf=新的jsPDF（“p”、“pt”、“字母”）；
对于（var i=0；i我在本页找到了解决方案：
来自用户：王志轩

我在这里复制解决方案：
//假设您的图片已经在画布中

      var imgData = canvas.toDataURL('image/png');

      /*
      Here are the numbers (paper width and height) that I found to work. 
      It still creates a little overlap part between the pages, but good enough for me.
      if you can find an official number from jsPDF, use them.
      */
      var imgWidth = 210; 
      var pageHeight = 295;  
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jsPDF('p', 'mm');
      var position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save( 'file.pdf');

这是我第一篇只支持一页的文章

现在，第二个将支持多个页面。
html2canvas（元素[0]{
onrendered：函数（画布）{
pages=Math.ceil（元素[0].clientHeight/1450）；
对于（i=0；i=0）{
pdf.addPage（）；
}
srcImg=画布；
sX=0；
sY=1450*i；
sWidth=1100；
sHeight=1450；
dX=0；
dY=0；
dWidth=1100；
dHeight=1450；
window.onePageCanvas=document.createElement（“画布”）；
onePageCanvas.setAttribute（'width'，1100）；
onePageCanvas.setAttribute（'height'，1450）；
ctx=一页
         html2canvas(element[0], {
                    onrendered: function (canvas) {
                        pages = Math.ceil(element[0].clientHeight / 1450);
                        for (i = 0; i <= pages; i += 1) {
                            if (i > 0) {
                                pdf.addPage();
                            }
                            srcImg = canvas;
                            sX = 0;
                            sY = 1450 * i;
                            sWidth = 1100;
                            sHeight = 1450;
                            dX = 0;
                            dY = 0;
                            dWidth = 1100;
                            dHeight = 1450;
                            window.onePageCanvas = document.createElement("canvas");
                            onePageCanvas.setAttribute('width', 1100);
                            onePageCanvas.setAttribute('height', 1450);
                            ctx = onePageCanvas.getContext('2d');
                            ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight);
                            canvasDataURL = onePageCanvas.toDataURL("image/png");
                            width = onePageCanvas.width;
                            height = onePageCanvas.clientHeight;
                            pdf.setPage(i + 1);
                            pdf.addImage(canvasDataURL, 'PNG', 35, 30, (width * 0.5), (height * 0.5));
                        }
                        pdf.save('testfilename.pdf');
                    }
                });

$( document ).ready(function() {    
$('#cmd').click(function() {
      var options = {
              pagesplit: true //include this in your code
      };
      var pdf = new jsPDF('p', 'pt', 'a4');
      pdf.addHTML($("#pdfContent"), 15, 15, options, function() {
        pdf.save('Menu.pdf');
      });
    });
});

var a = 0;
var d;
var increment;

for(n in array){
    d = a++;        

    if(n % 6 === 0 && n != 0){
        doc.addPage();
        a = 1;
        d = 0;
    }

    increment = d == 0 ? 10 : 50;
    size = (d * increment) <= 0 ? 10 : d * increment;

    doc.text(array[n], 10, size);
}

 var doc = new jsPDF('p', 'mm');

 var imgData = canvas.toDataURL('image/png');
 var pageHeight= doc.internal.pageSize.getHeight();
 var pageWidth= doc.internal.pageSize.getWidth();

 var imgheight = $('divName').height() * 25.4 / 96; //px to mm
 var pagecount = Math.ceil(imgheight / pageHeight);

 /* add initial page */
 doc.addPage('l','mm','a4');
 doc.addImage(imgData, 'PNG', 2, 0, pageWidth-4, 0);

 /* add extra pages if the div size is larger than a a4 size */
 if (pagecount > 0) {
     var j = 1;
     while (j != pagecount) {
         doc.addPage('l','mm','a4');
         doc.addImage(imgData, 'PNG', 2, -(j * pageHeight), pageWidth-4, 0);
         j++;
     }
 }