В этой статье мы увидим, как конвертировать 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 предоставляет два разных метода для использования.

  1. Установить с помощью NPM
  2. Файл CDN 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>

Вам также может понравиться:

Если этот пост был полезен, пожалуйста, нажмите кнопку аплодисментов 👏 ниже.