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

index.html`

<html>
<head>
<title>Html2Pdf</title>
<style>
</style>
</head>
<body>
  <button onclick="makeMultiPage()">PDF</button>
    <div id="content" >


        <h1>Html2Pdf</h1>
        <p>
            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>
        <p>A PDF of this page will be inserted into the right margin.</p>

        <h2>Colors</h2>
        <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>
        </p>

        <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'>
            Red
            <div style='background-color: green; margin: 1em; padding: 1em;'>
                Green
                <div style='background-color: blue; margin: 1em'>Blue</div>
            </div>
        </div>

        <h2>Borders</h2>
        <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>Lists</h2>
        <ul>
            <li>apples</li>
            <li>oranges</li>
            <li>pears</li>
            <li>peaches</li>
            <li>lemons</li>
            <li>limes</li>
        </ul>

        <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>

    </div>

</body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
  
  <script src="https://rawgit.com/MrRio/jsPDF/master/libs/html2pdf.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</html>

<html>

<head>

<style>

</style>

</head>

<body>

<p>

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>

<p>A PDF of this page will be inserted into the right margin.</p>

<h2>Colors</h2>

<p>

</p>

<h2>Text Alignment</h2>

<div style='text-align: center'>center</div>

<div style='text-align: right'>right</div>

<h2>Margins and Padding</h2>

Red

Green

</div>

<h2>Borders</h2>

<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>Lists</h2>

<ul>

<li>apples</li>

<li>oranges</li>

<li>pears</li>

<li>peaches</li>

<li>lemons</li>

<li>limes</li>

</ul>

</div>

</body>

</html>

script.js

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
        });

        doc.save('sample-file.pdf');
}
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: 
                // 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');
        }
      });
    }

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

});

doc.save('sample-file.pdf');

}

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:

// 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');

}

});

}

Related posts:

You Might Also Like

AngularJS Input Mask Form Fields Validation Example For Phone Numbers & Currency Input Full Project For Beginners

Angular 9 HTML2PDF.js Tutorial to Convert HTML Table to PDF in Typescript Full Project For Beginners

Join Node.js and Angular Whatsapp Group Invite Links For Javascript Frontend Programmers and Developers – Angular Whatsapp Group Invite Links For Node.js Programmers in 2021-22

Leave a Reply Cancel reply