В этой статье мы увидим, как конвертировать HTML в pdf с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Мы используем jsPDF для создания PDF в javascript. Он может генерировать PDF-файлы со стороны клиента. jsPDF очень прост в использовании в javascript.
Он также предоставляет несколько вариантов для создания PDF-файлов. Вы можете создавать PDF-файлы с изображениями и несколькими страницами, а также поддерживать разные языки, такие как японский, арабский, русский и т. д.
Подробнее: jsPDF Javascript Генерация PDF.
Итак, давайте посмотрим, как конвертировать jsPDF HTML в pdf, jsPDF HTML в pdf на несколько страниц, конвертировать HTML в pdf с помощью javascript, HTML в pdf в javascript с помощью jsPDF.
jsPDF предоставляет два разных метода для использования.
Пример:
На этом шаге мы создадим файл HTML. Итак, добавьте следующий код в файл.
<html> <h1>How To Convert HTML To PDF Using jsPDF- Techsolutionstuff</h1> <form class="form"> <table> <tbody> <tr> <th>Company Name</th> <th>Employee Name</th> <th>Country</th> </tr> <tr> <td>Dell</td> <td>Maria</td> <td>Germany</td> </tr> <tr> <td>Asus</td> <td>Francisco</td> <td>Mexico</td> </tr> <tr> <td>Apple</td> <td>Roland</td> <td>Austria</td> </tr> <tr> <td>HP</td> <td>Helen</td> <td>UK</td> </tr> <tr> <td>Lenovo</td> <td>Yoshi</td> <td>Canada</td> </tr> </tbody> </table><br> <input type="button" id="generate_pdf" value="Generate PDF"> </form> </html>
Теперь добавьте стиль этой HTML-страницы.
<style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td { border: 1px solid #dddddd; text-align: left; padding: 8px; } th{ border: 1px solid #dddddd; text-align: left; padding: 8px; background-color: #111; color:white; } tr:nth-child(odd) { background-color: #dddddd; } </style>
Добавьте следующий скрипт на HTML-страницу, чтобы преобразовать ее в pdf.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> <script> $(document).ready(function () { var form = $('.form'), cache_width = form.width(), a4 = [595.28, 841.89]; // for a4 size paper width and height $('#generate_pdf').on('click', function () { $('body').scrollTop(0); generatePDF(); }); function generatePDF() { getCanvas().then(function (canvas) { var img = canvas.toDataURL("image/png"), doc = new jsPDF({ unit: 'px', format: 'a4' }); doc.addImage(img, 'JPEG', 20, 20); doc.save('tech-html-to-pdf.pdf'); form.width(cache_width); }); } function getCanvas() { form.width((a4[0] * 1.33333) - 80).css('max-width', 'none'); return html2canvas(form, { imageTimeout: 2000, removeContainer: true }); } }); </script>
Вам также может понравиться:
- Читайте также: Как добавить загрузчик AJAX в jQuery
- Читайте также: Laravel 9 отправляет электронное письмо с вложением PDF
Если этот пост был полезен, пожалуйста, нажмите кнопку аплодисментов 👏 ниже.