В этой статье мы узнаем, как конвертировать HTML в PDF с помощью JavaScript. Формат PDF-файла очень полезен для массового восстановления данных в веб-приложениях. Это помогает пользователю загружать динамический контент в формате файла для автономного использования с экспортом PDF. JavaScript — это самый простой способ конвертировать HTML в PDF, и существуют различные библиотеки JavaScript для создания PDF-файлов из HTML. printThis — одна из лучших библиотек для преобразования HTML в PDF с помощью JavaScript. В этом уроке мы покажем вам, как создать документ PDF и преобразовать HTML в PDF с помощью JavaScript и библиотеки jsPDF.
См. также
- Конвертируйте HTML в PDF в PHP с помощью Dompdf
- Как импортировать и экспортировать файлы CSV с помощью PHP и MySQL
- Создать PDF-файл из базы данных MySQL с помощью PHP
- Как экспортировать данные Excel из базы данных в PHP с помощью электронной таблицы
- Импорт файла Excel в базу данных MySQL на PHP с помощью электронной таблицы
Включить библиотеку printThis
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"></script>
Конвертируйте HTML-контент в PDF с помощью JavaScript
Сначала мы создадим HTML-страницу для преобразования HTML в PDF. Добавьте следующий код на свою HTML-страницу. нам нужно добавить библиотеки jquery и printThis, которые помогут нам конвертировать HTML в PDD с помощью JavaScript. Это очень простой и простой способ конвертировать HTML в PDF.
index.php
<!DOCTYPE html>
<html>
<head>
<title>How to Convert HTML to PDF using JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h2>How to Convert HTML to PDF using JavaScript </h2>
</div>
<div class="container invoice-box">
<div class="row">
<div class="col-xs-12">
<div class="invoice-title">
<h2>Invoice</h2><h3 class="pull-right">Order # WC451544</h3>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Billed To:</strong><br>
Webs Codex<br>
1993 Hickory Lane<br>
Washington DC<br>
Washington, DC 20009
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Billed To:</strong><br>
Webs Codex<br>
1993 Hickory Lane<br>
Washington DC<br>
Washington, DC 20009
</address>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Payment Method:</strong><br>
Visa ending **** 4242<br>
[email protected]
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Order Date:</strong><br>
August 01, 2023<br><br>
</address>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Order summary</strong></h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<td><strong>Item</strong></td>
<td class="text-center"><strong>Price</strong></td>
<td class="text-center"><strong>Quantity</strong></td>
<td class="text-right"><strong>Totals</strong></td>
</tr>
</thead>
<tbody>
<!-- foreach ($order->lineItems as $line) or some such thing here -->
<tr>
<td>BS-200</td>
<td class="text-center">$10.99</td>
<td class="text-center">1</td>
<td class="text-right">$10.99</td>
</tr>
<tr>
<td>BS-400</td>
<td class="text-center">$20.00</td>
<td class="text-center">3</td>
<td class="text-right">$60.00</td>
</tr>
<tr>
<td>BS-1000</td>
<td class="text-center">$600.00</td>
<td class="text-center">1</td>
<td class="text-right">$600.00</td>
</tr>
<tr>
<td class="thick-line"></td>
<td class="thick-line"></td>
<td class="thick-line text-center"><strong>Subtotal</strong></td>
<td class="thick-line text-right">$670.99</td>
</tr>
<tr>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-center"><strong>Shipping</strong></td>
<td class="no-line text-right">$15</td>
</tr>
<tr>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-center"><strong>Total</strong></td>
<td class="no-line text-right">$685.99</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center; padding-top: 20px;">
<button type="button" class="btn btn-success" id="print-btn">Print</button>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"></script>
</body>
</html>
Добавьте немного стиля к дизайну, чтобы сделать HTML-страницу привлекательной.
style.css
.invoice-title h2, .invoice-title h3 {
display: inline-block;
}
.table > tbody > tr > .no-line {
border-top: none;
}
.table > thead > tr > .no-line {
border-bottom: none;
}
.table > tbody > tr > .thick-line {
border-top: 2px solid;
}
.invoice-box{
background: #f2f2f2;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
h2{
text-align: center;
font-size: 30px;
font-weight: 600;
font-family: revert;
color: green;
}
Добавьте код JavaScript для преобразования HTML-файла в PDF
<script type="text/javascript">
$(document).ready(function(){
$("#print-btn").click(function(){
$(".invoice-box").printThis();
});
});
</script>
https://webscodex.com/how-to-convert-html-to-pdf-using-javascript/
Заключение
В этой статье я объяснил процесс Как конвертировать HTML в PDF с помощью библиотеки javascript printThis. Я попробовал очень простой способ конвертировать HTML в PDF с помощью javascript. Вы можете легко расширить функционал в соответствии с вашими потребностями. Чтобы получить все необходимые файлы, скачайте исходный код.
