Как конвертировать HTML в PDF с помощью jsPDF
27.01.2023 05:32
В этой статье мы рассмотрим, как конвертировать 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 предоставляет два различных метода для использования.
- Установка с помощью NPM
- 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 есть оператор "pass"?
05.05.2023 14:00
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
Коллекции в Laravel более простым способом
05.05.2023 11:59
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.
JavaScript Вопросы с множественным выбором и ответы
05.05.2023 11:57
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.
Toor - Ангулярный шаблон для бронирования путешествий
05.05.2023 09:26
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут вам настроить, как будет выглядеть ваш сайт Temple, и вы можете настроить его дизайн в зависимости от ваших потребностей в дополнение к более чем 15+...