PDF file created with html2canvas and jspdf - Text selection not allowed in the pdf

Viewed 1847

I'm trying to create a script allowing to create a pdf file from an HTML page. I'm using the library mustache, jspdfhtml2canvas and jquery

All is correctly working: mustache retrieves data and creates the variable. All is correctly displayed in the page.

I created a function for generating the pdf, it's working:

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

            }

After clicking the generate button, the pdf is generated. Nevertheless it's not possible to select the text in the pdf. I don't know how to do update the script for doing that, because I need this feature into the pdf file.

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 help me please with that?

Thanks in advance for your help.

1 Answers

IMHO, since this uses canvas, it takes a picture of your rendered HTML document, and then creates a pdf using that picture. It does not construct a pdf document like you would expect. Since the document is an image, you cannot select the text.

Related