Как конвертировать HTML в PDF с помощью JavaScript

Я хочу конвертировать HTML в PDF одним нажатием кнопки и скачать. Моим js, работающим отлично, нужна только последняя ссылка JavaScript CDN.

HTML

<div id = "pageprint">
   <div id = "reportbox">Hello World!!</div>
</div> 
<button type = "button" onclick = "downloadCode();">Download HTML</button>

Javascript

<script>
    function generatePDF() {
    
    const element = document.getElementById("pageprint");
    document.getElementById("reportbox").style.display = "block";
    document.getElementById("reportbox").style.marginTop = "0px"; 
    document.getElementById("pageprint").style.border = "1px solid black";
    html2pdf().from(element).save('download.pdf'); 
    }
    
    function downloadCode(){
    var x = document.getElementById("reportbox");  
    generatePDF();
    setTimeout(function() { window.location=window.location;},3000);}
</script>

🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.

[РЕШЕНО]Перейти к решению

251

3

Javascript273878 вопросов Html113619 вопросов Jquery62551 вопрос Html to pdf76 вопросов

Вы можете распечатать html, как показано ниже.

<style type = "text/css">
    @media print{ button {display:none} };
</style>

<div id = "pageprint">
   <div id = "reportbox">Hello World!!</div>
</div> 
<button type = "button" onclick=javascript:window.print()>Download HTML</button>

Пожалуйста, дайте мне знать, если обнаружена какая-либо проблема

Нет простого способа сделать это. Лучшее, что вы можете сделать, это открыть пустую страницу, заполнить ее данными в формате html и распечатать в формате pdf. Или поищите какую-нибудь внешнюю библиотеку, например jsPDF.

пример для печати в pdf:

 var wnd = window.open('about:blank', '', '_blank');
 wnd.document.write("<p> Some HTML-Content </p> ");
 wnd.print();

Решено

Если все, что вам нужно, это CDN, просто добавьте его после </body>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity = "sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>

    function generatePDF() {
    
    const element = document.getElementById("pageprint");
    document.getElementById("reportbox").style.display = "block";
    document.getElementById("reportbox").style.marginTop = "0px"; 
    document.getElementById("pageprint").style.border = "1px solid black";
    html2pdf().from(element).save('download.pdf'); 
    }
    
    function downloadCode(){
    var x = document.getElementById("reportbox");  
    generatePDF();
    setTimeout(function() { window.location=window.location;},3000);}

<div id = "pageprint">
   <div id = "reportbox">Hello World!!</div>
</div> 
<button type = "button" onclick = "downloadCode();">Download HTML</button>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

Однако кажется очень странным способ попросить пользователя загрузить страницу в формате PDF, поскольку опция исчезает после попытки загрузки, поэтому изменение мнения не делает его видимым для пользователя, чтобы попытаться по-другому в случае неудачи.

Так, например, я говорю открыть загрузку на текущей странице, я вижу

но если я скажу открыть в PDF Viewer, я увижу

Гораздо проще оформить печатную HTML-страницу как текст, а не изображение, и предложить пользователю распечатать или сохранить точно так, как настроен его браузер и его желание, лучший результат для всех, тем более что библиотеки не нужны. Страница также не будет загромождена кнопками.

Как конвертировать HTML в PDF с помощью JavaScript

Ответы:

Интересные вопросы для изучения