CODEWITHSUNDEEP
htmlpdfjspdfmustachehtml2canvas
coeurdange57
coeurdange57

Reputation: 743

Create a real pdf from an HTML page using mustache and JSPDF

I would like to create a real pdf (where we can access to the pdf options as select text in the pdf file) from an HTML page using jquery, jspdf and mustache.

When I tried to use jspdf and the library html2canvas, all moustache code used for displaying data in html are not taken in account when the pdf is generated.

I'm using jspdf with html2canvas but it's not working because the library generates an image for the PDF creation.

Here my code:

    <html> 
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>PDF CREATOR</title>      
        <link id="BootstrapCSS" rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css">       
        <script type="text/javascript" src="/_layouts/15/jquery/jquery-2.1.4.min.js"></script>
        <script src="../lib/mustache/mustache.js"></script>     
        <script src="../lib/jspdf/html2canvas.js"></script>
        <script src="../lib/jspdf/jspdf.debug.js"></script>     

    </head>

    <body onload="renderHTML()">
        <div id="target">Loading...</div>
        <script id="template" type="x-tmpl-mustache">
            <div class="container-fluid">
                <button type="button" class="btn btn-primary btn-lg" onclick="generatePDF()">Generate PDF</button>
                <div id="content"><br />
                    <table id="table01" class="table table-bordered table_border">                      
                        <tbody> 
                            <tr>
                                <td colspan="2"><b>CONTRACT:</b> <strong class="red">{{ subject }}</strong></td>
                            </tr>                           
                            <tr>
                                <td><b>RESPONSIBLE UNIT:</b> <strong class="red">{{ unit }}</strong></td>
                                <td><b>CONTRACT NUMBER:</b> {{ contractNumber }}</td>
                            </tr>
                        </tbody>                    
                    </table>

                </div>
            </div>
        </script>

        <script>

            $(document).ready(function() {      
                var contractId = $.urlParam('contractId');

                if (ContractId) {
                    var contract = getContractById(contractId);

                    data.contractId = contractId;                   
                    data.subject = contract.Title;
                    data.unit = contract.Unit;
                    data.contractNumber = contract.ContractNumber;
                }
            });

            var data = {
                contractId: '',
                subject: '',
                unit: '',
                contractNumber: ''
            };

            function renderHTML() {
                var template = document.getElementById('template').innerHTML;
                var rendered = Mustache.render(template, data);
                document.getElementById('target').innerHTML = rendered;
            }

            function generatePDF() {                

                html2canvas(document.getElementById('content'), { scale: 1, width: 2000, height: 9000 }).then(canvas => {
                    var imgData = canvas.toDataURL("image/jpeg");
                    var pdf = new jsPDF('p', 'mm', [520, 1080]);
                    pdf.addImage(imgData, 'JPEG', 10, 10);

                    pdf.save(Test.pdf);
                });

            }
        </script>
    </body> 
</html>

Could you please help me to find the best library to do that?

Thank you in advance for your help.

Upvotes: 1

Views: 1872

Answers (1)

yycking
yycking

Reputation: 1331

Without JSPDF, just use iframe + windows.print

iframe.contentWindow.document.body.innerHTML = rendered

function generatePDF() {                
  iframe.contentWindow.print()
}

code and demo

Upvotes: 0

Related Questions