Преобразование HTML в PDF в Javascript (простые примеры)
Добро пожаловать в учебник о том, как конвертировать файлы HTML в PDF с помощью Javascript. Да, создание файлов PDF не ограничивается серверной частью.
Чтобы создать файлы PDF из HTML в Javascript:
• Мы можем использовать библиотеку под названием HTML2PDF .
• Просто загрузите библиотеку с их страницы Github или загрузите ее с CDNJS .
• Чтобы преобразовать всю HTML-страницу в файл PDF –html2pdf().from(document.body).save();
ПРИМЕР 1) СОХРАНЕНИЕ ВСЕЙ СТРАНИЦЫ КАК ФАЙЛ PDF
1-entire-page.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Вся страница в PDF</title>
<script src="html2pdf.bundle.min.js"></script>
</head>
<body>
<!-- МАКЕТ СОДЕРЖИМОГО -->
<h1>Привет, мир!</h1>
<p>Это пример.</p>
<!-- ВСЮ СТРАНИЦУ В PDF -->
<script>
function toPDF () {
html2pdf()
.from(document.body)
.save();
}
</script>
<button onclick="toPDF()">Создать PDF</button>
</body>
</html>
Как и во введении, все, что нам нужно сделать, это загрузить библиотеку HTML2PDF — html2pdf().from(document.body).save()она преобразует всю страницу в файл PDF. Но имейте в виду, что сгенерированный PDF-файл может не быть точным на 100 % на сложных страницах.
ПРИМЕР 2) ПРЕОБРАЗОВАТЬ РАЗДЕЛ В PDF (И ВАРИАНТЫ)
2-section.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Раздел в PDF</title>
<script src="html2pdf.bundle.min.js"></script>
</head>
<body>
<!-- МАКЕТ СОДЕРЖИМОГО -->
<h1>Привет, мир!</h1>
<div id="demo">
<p>
проверяем работает ли документ.
<br>
должен вроде.
</p>
</div>
<p>Это пример.</p>
<!-- ВСЮ СТРАНИЦУ В PDF -->
<script>
function toPDF () {
html2pdf()
// УСТАНОВИТЬ ПАРАМЕТРЫ
.set({
margin: 1,
filename: "demo.pdf",
image: { type: "jpeg", quality: 0.8 },
enableLinks : true,
jsPDF: { format: "A4", orientation: "landscape" }
})
// ПОЛУЧИТЬ КОНТЕНТ ИЗ РАЗДЕЛА
.from(document.getElementById("demo"))
// СОХРАНИТЬ В ФАЙЛ
.save();
}
</script>
<button onclick="toPDF()">Создать PDF</button>
</body>
</html>
ПРИМЕР 3) СТРОКА HTML В PDF
3-string.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Строчный pdf</title>
<script src="html2pdf.bundle.min.js"></script>
</head>
<body>
<!-- PDF ИЗ HTML СТРОКИ -->
<script>
function toPDF () {
html2pdf()
// FEED HTML STRING
.from(`<h1>Привет, мир!</h1><p>Это пример.</p>`)
// СОХРАНИТЬ В ФАЙЛ
.save();
}
</script>
<!-- СТАРТ! -->
<button onclick="toPDF()">Создать PDF</button>
</body>
</html>
Вы можете посмотреть и скачать пример.
библиотека HTML2PDF . есть в архиве.
Посмотреть пример 1
Посмотреть пример 2
Посмотреть пример 3
Скачать
