Живая демонстрация: 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/.

Также проверьте:

Удачного кодирования..!

Первоначально опубликовано на:https://phpcoder.tech/download-html-page-as-pdf-using-javascript/