2

I have asp.net MVC project and want to print HTML div as pdf into two Pages and this is Example of my code HTML Code 

<div class="row" id="mycanvas">
<p>This is My Content1</p>
<p>This is My Content2</p>
</div>

<button type="button" onclick="savePdf()">  Save As PDF </button>

JS Code

function savePdf() {
    html2canvas($("#mycanvas"), {
        onrendered: function (canvas) {
            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            // generatePDF(imgData);
            generatePDF(canvas);
        }
    });
}
function generatePDF(imgData) {
    var doc = new jsPDF("p", "mm", "a4");
    var width = doc.internal.pageSize.width;
    var height = doc.internal.pageSize.height;
    doc.addImage(imgData, 'JPEG', 0, 0, width, height);
    doc.save('download.pdf');
}

I Want Split this Div into 2 pdf Pages

Osama Elsayed
  • 29
  • 1
  • 5
  • This may help you https://stackoverflow.com/questions/1664049/can-i-force-a-page-jump-in-html-printing/1664058 – Kunj Sep 05 '18 at 09:50

1 Answers1

1

Not sure how to split the SAME div over two pages. but with page breaks you should be able to put a specific div on a new page...

Something similar to this in the CSS:

@media print
{
  .page-break  { display:block; page-break-before:always; }

}

and then in the html where you want the break to happen

<div class="page-break"></div>
user7592671
  • 310
  • 3
  • 17
  • common reasons page breaks wouldn't be working is if parent elements have floats in them. using page-break inside tables, floating elements, inline-block elements, and block elements with borders. – user7592671 Sep 05 '18 at 11:04