blocks|key|173073|text|我也有同样的问题。在MrRio+github中搜索，我找到了这个：https://github.com/MrRio/jsPDF/issues/101|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|173074|基本上，在添加新内容之前，您必须始终检查实际页面大小|173075|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");|code-block|syntax|javascript|173076|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/MrRio/jsPDF/issues/101^0|X|15|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>I have the same working issue. Searching in MrRio github I found this: <a href="https://github.com/MrRio/jsPDF/issues/101" rel="noreferrer">https://github.com/MrRio/jsPDF/issues/101</a></p>

<p>Basically, you have to check the actual page size always before adding new content</p>

<pre><code>doc = new jsPdf();
...
pageHeight= doc.internal.pageSize.height;

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


blocks|key|2989902|text|下面是我的代码，但问题是文档不能拆分以在新页面中显示文档的其他部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2989903|请改进此代码。|2989904|<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%2B%2B;

++++++++$.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%2B%2B)+{
++++++++headers[i]+=+table.rows[0].cells[i].innerHTML.toLowerCase().replace(/+/gi,'');
++++}

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

++++++++var+tableRow+=+table.rows[i];

++++++++var+rowData+=+{};

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

++++++++data.push(rowData);
++++}

++++return+data;
}
</script>|code-block|syntax|javascript|2989905|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Below is my code but the problem is that the document doesn't split to display the other part of the document in a new page.</p>

<p>Please improve this code.</p>

<pre><code>&lt;script type='text/javascript'&gt;
$(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&lt;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&lt;table.rows.length; i++) {

        var tableRow = table.rows[i];

        var rowData = {};

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

        data.push(rowData);
    }

    return data;
}
&lt;/script&gt;
</code></pre>


blocks|key|171835|text|你可以同时使用jsPDF和html2canvas插件。处理顺序:+html到png和png到pdf|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|171836|示例代码：|171837|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");|code-block|syntax|javascript|171838|entityMap|0|LINK|mutability|MUTABLE|url|http://www.kubilayerdogan.net/html2canvas-take-screenshot-of-web-page-and-save-it-to-server-javascript-and-php/^0|D|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>You can use <a href="http://www.kubilayerdogan.net/html2canvas-take-screenshot-of-web-page-and-save-it-to-server-javascript-and-php/" rel="nofollow">html2canvas</a> plugin and jsPDF both. Process order:
html to png &amp; png to pdf</p>

<p>Example code:</p>

<pre><code>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");
</code></pre>


blocks|key|175541|text|自动不将数据拆分到多个页面。您可以手动拆分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|175542|如果您的(+rowCount+*+rowHeight+)>420+mm+(+A3高度单位为mm)，则添加新的页面函数。(对不起，我不能编辑你的代码，除非运行)在添加新页面leftMargin后，topMargin+=+0；(重新开始)我添加了你的示例代码。我希望这是对的。|175543|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+%2B+leftMargin+);
++++++++top+=+(+(+rowcount+-+3+)+*+(+rowHeight+%2B+topMargin+);
++++++++doc.cell(+leftMargin,+top,+cellWidth,+rowHeight,+cellContent,+i);
++++++++//+1st=left+margin++++2nd+parameter=top+margin,+++++3rd=row+cell+width++++++4th=Row+height
++++}
}|code-block|syntax|javascript|175544|您可以直接将html转换为pdf无损格式。Youtube+video+for+html+=>+pdf+example|offset|length|175545|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/watch?v=-hPoIAMk9fM^0|0|0|0|L|11|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Automatically not split data to multi pages. You may split manually.</p>

<p>If your ( rowCount * rowHeight ) > 420mm ( A3 Height in mm ) add new page function. ( Sorry I can't edit your code without run )
After add new page leftMargin, topMargin = 0; ( start over )
I added sample code with yours. I hope it's right.</p>

<pre><code>else {
    doc.margins = 1;
    doc.setFont("Times  ");
    doc.setFontType("normal ");
    doc.setFontSize(11);
    if ( rowCount * rowHeight &gt; 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
    }
}
</code></pre>

<p>You can convert html directly to pdf lossless. <a href="https://www.youtube.com/watch?v=-hPoIAMk9fM" rel="nofollow">Youtube video for html => pdf example</a></p>


blocks|key|173882|text|下面是一个使用html2canvas+&+jspdf的示例，尽管如何生成画布并不重要--我们将使用画布的高度作为for+loop上的断点，在该断点中将创建一个新页面并向其中添加内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|173883|在for循环之后，保存pdf。|173884|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%2B%2B)+{
++++++++++++//!+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%2B1);
++++++++++++//!+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');
++});
}|code-block|syntax|javascript|173885|entityMap^0|1K|8|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>here's an example using html2canvas &amp; jspdf, although how you generate the canvas doesn't matter--we're just going to use the height of that as the breakpoint on a <code>for loop</code>, in which a new page is created and content added to it.</p>
<p>after the for loop, the pdf is saved.</p>
<pre><code>function makePDF() {

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

        for (var i = 0; i &lt;= 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(&quot;canvas&quot;);
            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(&quot;image/png&quot;, 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 &gt; 0) {
                pdf.addPage(612, 791); //8.5&quot; x 11&quot; 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');
  });
}
</code></pre>


blocks|key|2990067|text|我在这个页面上找到了解决方案:来自用户的https://github.com/MrRio/jsPDF/issues/434：wangzhixuan|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2990068|我将解决方案复制到这里:+//假设您的图片已经在画布中|2990069|++++++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');﻿|code-block|syntax|javascript|2990070|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/MrRio/jsPDF/issues/434^0|K|15|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>I found the solution on this page: <a href="https://github.com/MrRio/jsPDF/issues/434" rel="noreferrer">https://github.com/MrRio/jsPDF/issues/434</a>
From the user: wangzhixuan</p>

<p>I copy the solution here:
 // suppose your picture is already in a canvas</p>

<pre><code>      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 &gt;= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save( 'file.pdf');﻿
</code></pre>


blocks|key|2777498|text|这是我第一篇只支持单页http://www.techumber.com/html-to-pdf-conversion-using-javascript/的文章|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2777499|现在，第二个将支持多个页面。http://www.techumber.com/how-to-convert-html-to-pdf-using-javascript-multipage/|2777500|entityMap|0|LINK|mutability|MUTABLE|url|http://www.techumber.com/html-to-pdf-conversion-using-javascript/|1|http://www.techumber.com/how-to-convert-html-to-pdf-using-javascript-multipage/^0|B|1T|0|0|E|27|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>This is my first post which support only a single page <a href="http://www.techumber.com/html-to-pdf-conversion-using-javascript/" rel="nofollow noreferrer">http://www.techumber.com/html-to-pdf-conversion-using-javascript/</a></p>

<p>Now, the second one will support the multiple pages.
<a href="http://www.techumber.com/how-to-convert-html-to-pdf-using-javascript-multipage/" rel="nofollow noreferrer">http://www.techumber.com/how-to-convert-html-to-pdf-using-javascript-multipage/</a></p>


blocks|key|2777507|text|+++++++++html2canvas(element[0],+{
++++++++++++++++++++onrendered:+function+(canvas)+{
++++++++++++++++++++++++pages+=+Math.ceil(element[0].clientHeight+/+1450);
++++++++++++++++++++++++for+(i+=+0;+i+<=+pages;+i+%2B=+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+%2B+1);
++++++++++++++++++++++++++++pdf.addImage(canvasDataURL,+'PNG',+35,+30,+(width+*+0.5),+(height+*+0.5));
++++++++++++++++++++++++}
++++++++++++++++++++++++pdf.save('testfilename.pdf');
++++++++++++++++++++}
++++++++++++++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2777508|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>         html2canvas(element[0], {
                    onrendered: function (canvas) {
                        pages = Math.ceil(element[0].clientHeight / 1450);
                        for (i = 0; i &lt;= pages; i += 1) {
                            if (i &gt; 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');
                    }
                });
</code></pre>


blocks|key|171923|text|$(+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');
++++++});
++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|171924|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$( 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');
      });
    });
});
</code></pre>


blocks|key|2990120|text|var+a+=+0;
var+d;
var+increment;

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

++++if(n+%25+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);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2990121|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var a = 0;
var d;
var increment;

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

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

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

    doc.text(array[n], 10, size);
}
</code></pre>


blocks|key|175582|text|+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%2B%2B;
+++++}
+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|175583|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> 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 &gt; 0) {
     var j = 1;
     while (j != pagecount) {
         doc.addPage('l','mm','a4');
         doc.addImage(imgData, 'PNG', 2, -(j * pageHeight), pageWidth-4, 0);
         j++;
     }
 }
</code></pre>


<p>I am using jsPDF in my site to generate PDFs. But now I have multiple DIVs to print in a single PDF. which may take 2 to 3 pages.</p>

<p>For example:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div id="part1"&gt;
  content
&lt;/div&gt;

&lt;div id="part2"&gt;
  content
&lt;/div&gt;

&lt;div id="part2"&gt;
   content
&lt;/div&gt;
</code></pre>

<p>my JS code </p>

<ul>
<li>This works but not as I expected, It add a part of the content(which cannot be included in more than one page).</li>
<li>It removes html tags like br, h1  etc.</li>
</ul>

<pre class="lang-js prettyprint-override"><code>    function formtoPDF() {
      jsPDF.API.mymethod = function() {
        // 'this' will be ref to internal API object. see jsPDF source
        // , so you can refer to built-in methods like so:
        //   this.line(....)
        //   this.text(....)
      };
      var doc = new jsPDF();
      doc.mymethod();
      var pdfPart1 = jQuery('#genPDFpart1');
      var pdfPart2 = jQuery(".ltinerary");
      var pdfPart3 = jQuery("#domElementHTML");
      var specialElementHandlers = {
        '#loadVar': function(element, renderer) {
          return true;
        }
      };
      doc.fromHTML(pdfPart1.html() + pdfPart3.html() + pdfPart3.html(), 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers
      });
      doc.output('save', 'Download.pdf');
    }
</code></pre>

<p>Can I have a solution for this. Thanks in advance pals .</p>


jsPDF multi page PDF with HTML renderer

jQuery

我在我的网站中使用jsPDF来生成PDF。但是现在我有多个DIVs可以在一个PDF中打印。这可能需要2到3页。例如：<div id="part1">  content</div><div id="part2">  content</div><div id="part2">   content</div>我的JS代码这是...

问使用HTML渲染器的jsPDF多页PDF
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML渲染器的jsPDF多页PDFEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML渲染器的jsPDF多页PDF
EN