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

RedDeveloper
27.01.2023 05:32
Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Мы используем jsPDF для генерации PDF на javascript. Он может генерировать PDF на стороне клиента. jsPDF очень прост в использовании в javascript.

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

Узнать больше: jsPDF Javascript PDF Generate .

Рассмотрим jsPDF HTML в pdf конвертировать, jsPDF HTML в pdf несколько страниц, конвертировать HTML в pdf с помощью javascript, HTML в pdf в javascript с помощью jsPDF.

JsPDF предоставляет два различных метода для использования.

  1. Установка с помощью NPM
  2. jsPDF CDN файл

Пример:

В этом шаге мы создадим 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

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

Почему в Python есть оператор &quot;pass&quot;?
Почему в Python есть оператор "pass"?

05.05.2023 14:00

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

Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом

05.05.2023 11:59

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы

05.05.2023 11:57

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.

Массив зависимостей в React
Массив зависимостей в React

05.05.2023 09:44

Все о массиве Dependency и его связи с useEffect.

Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий

05.05.2023 09:26

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут вам настроить, как будет выглядеть ваш сайт Temple, и вы можете настроить его дизайн в зависимости от ваших потребностей в дополнение к более чем 15+...