Генерация PDF из внешнего HTML-файла и CSS - PullRequest
Новая
       15

Генерация PDF из внешнего HTML-файла и CSS

0 голосов
/ 27 сентября 2019

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

На данный момент это мой код: 

function savePDF(data) {
    var parser = new DOMParser();
    var htmlDoc = parser.parseFromString(data, 'text/html'); 

    let pdf = new jsPDF('p','pt','a4');
    pdf.addHTML(
        htmlDoc.body, // HTML DOM element.
    );
    pdf.save("test.pdf");
}

Где data - строка, содержащая html внешней веб-страницы, которую я хочу преобразовать в pdf.

Chrome генерирует ошибку TypeError: Cannot read property 'innerWidth' of null

Это, например, прекрасно работает (используется fromHTML вместо addHTML), но отсутствует CSS / стиль: 

function savePDF(data) {    
    var parser = new DOMParser();
    var htmlDoc = parser.parseFromString(data, 'text/html'); 

    let pdf = new jsPDF('p','pt','a4');
    pdf.fromHTML(htmlDoc.body.innerHTML, 0, 0, {},
        function(){pdf.save('test.pdf');
    });
}

Пример HTML-кода, который я использую: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>PDF Test</title>
    </head>
    <body>
        <div id="capture" style="padding: 10px; background: #f5da55">
                <h4 style="color: #000; ">Hello world!</h4>
        </div>
    </body>
</html>

1 Ответ

1 голос
/ 27 сентября 2019

Как сказано в документации, метод addHtml устарел (http://raw.githack.com/MrRio/jsPDF/master/docs/global.html#addHTML),), поэтому я немного поиграл с вашим примером, и если вы обновили свой код, он работает. Вам все равно придется немного поработать, чтобы исправить ширинуDiv в PDF. 

<!DOCTYPE html>
        <html>
            <head>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
                <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
            </head>
            <body>
                <div id="capture" style="padding: 10px; background: #f5da55;">
                        <h4 style="color: #000; ">Hello world!</h4>
                </div>
            </body>
            <script type="text/javascript">
                function savePDF(data) {
                    let pdf = new jsPDF('p','pt','a4');
                    pdf.html(data, {
                       callback: function (doc) {
                         doc.save("test.pdf");
                       }
                    });
                } 
                savePDF(document.body.innerHTML)
            </script>
        </html>
...