Создайте настоящий PDF-файл из страницы HTML с помощью усов и JSPDF - PullRequest
Новая
       126

Создайте настоящий PDF-файл из страницы HTML с помощью усов и JSPDF

0 голосов
/ 29 мая 2020

Я хотел бы создать настоящий PDF-файл (где мы можем получить доступ к параметрам PDF-файла в виде выделенного текста в PDF-файле) из HTML страницы , используя jquery, jspdf и усы .

Когда я пытался использовать jspdf и библиотеку html2canvas, весь код усов, используемый для отображения данных в html не учитываются при создании PDF-файла.

Я использую jspdf с html2canvas , но он не работает, потому что библиотека создает изображение для PDF Создание.

Вот мой код: 

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

Не могли бы вы помочь мне найти лучшую библиотеку для этого?

Заранее благодарю за вашу помощь.

...