Angular 9 HTML2PDF.js Export Multiple Page PDF Document With CSS Styled Tables Using jsPDF Library in Javascript Full Project For Beginners









  <button onclick="makeMultiPage()">PDF</button>
    <div id="content" >

            This demo uses Html2Canvas.js to render HTML. <br />Instead of using an HTML canvas however, a canvas wrapper using jsPDF is substituted. The <em>context2d</em> provided by the wrapper calls native PDF rendering methods.
        <p>A PDF of this page will be inserted into the right margin.</p>

            <span style='color: red'>red</span> <span style='color: rgb(0, 255, 0)'>rgb(0,255,0)</span> <span style='color: rgba(0, 0, 0, .5)'>rgba(0,0,0,.5)</span> <span style='color: #0000FF'>#0000FF</span> <span style='color: #0FF'>#0FF</span>

        <h2>Text Alignment</h2>
        <div style='text-align: left'>left</div>
        <div style='text-align: center'>center</div>
        <div style='text-align: right'>right</div>

        <h2>Margins and Padding</h2>
        <div style='background-color: red'>
            <div style='background-color: green; margin: 1em; padding: 1em;'>
                <div style='background-color: blue; margin: 1em'>Blue</div>

        <div style='border: 1px solid black'>Single</div>
        <hr />
        <div style='border: 4px double black'>Double</div>

        <h2>Font Style</h2>
        <div style='font-style: normal'>Normal</div>
        <div style='font-style: italic'>Italic</div>
        <div style='font-style: oblique'>Oblique</div>

        <h2>Font Size</h2>
        <div style='font-size: 10px'>10px</div>
        <div style='font-size: 20px'>20px</div>
        <div style='font-size: 30px'>30px</div>

        <div style='font-size: 20pt'>20pt</div>
        <div style='font-size: 1em'>1em</div>
        <div style='font-size: 2em'>2em</div>


  <script src=""></script>
  <script src=""></script>
  <script src=""></script>






function makePDF () {
  var doc = new jsPDF('p', 'pt', 'a4');
      var specialElementHandlers = {

doc.fromHTML(document.getElementById('content'), 15, 15, {
          'width': 250,
          'margin': 1,
          'pagesplit': true,
          'elementHandlers': specialElementHandlers
function makeMultiPage() {

        var quotes = document.getElementById('content');

        html2canvas(quotes, {
            onrendered: function(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: 

                // 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
                //! 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.

Leave a Reply