Живая демонстрация: https://phpcoder.tech/download-html-page-as-pdf-using-javascript/#Live_Demo_To_Generate_PDF_From_HTML_Using_JavaScript
Для хранения динамического контента с веб-страницы или HTML-страницы для будущего использования формат PDF очень удобен. Это также может помочь загрузить большой объем данных из веб-приложения путем экспорта HTML-страницы в PDF по событию клика пользователя с использованием функций JavaScript. Загрузка HTML-страницы в формате PDF Используя JavaScript, JavaScript имеет огромное количество библиотек, доступных для создания PDF-файлов из HTML. Но здесь мы используем jsPDF, лучшую библиотеку JavaScript для преобразования и загрузки HTML-страниц в формате PDF с использованием JavaScript.
В этом уроке мы покажем вам, как создать PDF-файл из HTML-страницы с помощью JavaScript и jQuery, а также сохранить HTML-страницу в формате PDF с помощью JavaScript с помощью демонстрации в реальном времени.
Видео-демонстрация полного исходного кода для загрузки HTML-страницы в формате PDF с использованием JS здесь,
Шаги для загрузки HTML-страницы в формате PDF с использованием JavaScript
- Включите библиотеку jQuery и jsPDF, используя их ссылку CDN.
- Создайте раздел содержимого HTML.
- Создайте экземпляр класса jsPDF.
- Создайте функцию нажатия кнопки для создания и загрузки PDF из HTML.
- Живая демонстрация
Включить библиотеки jQuery и jsPDF
Здесь мы включаем библиотеку jQuery и jsPDF для использования класса jsPDF и jQuery для нажатия кнопки и получения данных из div.
‹script src="https://code.jquery.com/jquery-3.6.0.min.js›‹/script›
‹script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js›‹/script›
Примечание. Вам не нужно загружать полный пакет jsPDF с официального сайта. В ссылке CDN доступны все необходимые функции.
Создайте Div HTML-контента с помощью CSS
Таблица {
семейство шрифтов: arial, без засечек;
граница коллапса: коллапс;
ширина: 50%;
поле: 0px авто;
}
#htmlКонтент{
выравнивание текста: по центру;
}
тд, й, кнопка {
граница: 1px сплошная #dddddd;
выравнивание текста: по левому краю;
отступ: 8px;
}
кнопка {
граница: 1px сплошной черный;
}
tr: n-й ребенок (четный) {
цвет фона: #dddddd;
}
‹div id="htmlКонтент"›
‹h2 style="color: #0094ff"›Привет‹/h2›
‹h3›Об этом Кодексе:‹/h3›
‹p›Демонстрация того, как конвертировать и загружать HTML-страницу в файл PDF с помощью CSS, используя JavaScript и jQuery.‹/p›
‹тело›
<tr>
‹th›Человек‹/th›
‹th›Контакт‹/th›
‹th›Страна‹/th›
</tr>
<tr>
‹td›Джон‹/td›
<td>+2345678910</td>
‹td›Германия‹/td›
</tr>
<tr>
‹td›Джейкоб‹/td›
<td>+1234567890</td>
‹td›Мексика‹/td›
</tr>
<tr>
‹td›Одиннадцать‹/td›
<td>+91234567802</td>
‹td›Австрия‹/td›
</tr>
‹/тело›
‹/дел›
‹идентификатор div="редактор"›‹/div›
<p>
‹button id="generatePDF"›создать PDF‹/кнопка›
</p>
Здесь мы создаем HTML-таблицу с некоторым оформлением с помощью CSS, а также создаем кнопку, по которой пользователи могут щелкнуть и загрузить HTML-страницу в формате PDF.
Также читайте: Экспорт данных MySQL в Excel в PHP с помощью Ajax
Создать экземпляр класса jsPDF
Следующая строка кода jsPDF создает и использует объект jsPDF в JavaScript.
var doc = новый jsPDF();
Код JavaScript для создания PDF из HTML
‹тип скрипта="текст/javascript"›
var doc = новый jsPDF();
вар specialElementHandlers = {
‘#editor’: функция (элемент, визуализатор) {
вернуть истину;
}
};
$(‘#generatePDF’).click(функция () {
doc.fromHTML($(‘#htmlContent’).html(), 15, 15, {
«ширина»: 700,
«обработчики элементов»: специальные обработчики элементов
});
doc.save('sample_file.pdf');
});
‹/скрипт›
Особенности кода:
- Во-первых, мы создаем экземпляр класса jsPDF.
- После этого, используя атрибут #editor id элемента HTML div, мы берем данные HTML-страницы.
- Теперь мы используем атрибут идентификатора кнопки
#generatePDF
для события клика. - Используя объект doc с функцией fromHTML(), мы устанавливаем ширину, поле слева(15) и поле сверху( 15) .
- Наконец,
save()
с объектом doc используется для загрузки PDF из HTML.
Живая демонстрация для создания PDF из HTML с использованием JavaScript
Это полное объяснение того, как загрузить HTML-страницу в формате PDF с помощью JavaScript и jQuery с помощью библиотеки jsPDF. Если у вас возникли какие-либо проблемы во время реализации, пожалуйста, оставьте комментарий ниже.
Проверьте больше материалов по jsPDF здесь https://mrrio.github.io/jsPDF/.
Также проверьте:
- Импорт и экспорт файла CSV в PHP
- Полное руководство по журналу ошибок PHP
- Перенос сайта WordPress на новый хостинг вручную
- Преобразование строки в массив в PHP без взрыва
Удачного кодирования..!
Первоначально опубликовано на:https://phpcoder.tech/download-html-page-as-pdf-using-javascript/