Angular 9 jsPDF + Html2Canvas Tutorial to Convert HTML With CSS to PDF Document Using Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be converting html with css to pdf document using jspdf and html2canvas in angular 9 . All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

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

</body>
</html>

 

See also  React.js Digital Alarm Clock Widget With Date & Time in Browser Using Javascript Full Project For Beginners

 

 

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

Leave a Reply