Как использовать js или php для преобразования веб-страниц HTML в PDF

Автор：Eve Cole Время обновления：2024-12-13 08:48:02

Редактор Downcodes предлагает вам руководство по использованию JavaScript и PHP для преобразования веб-страниц HTML в файлы PDF. В этой статье будут подробно описаны два метода: использование библиотеки JavaScript jsPDF и использование библиотеки PHP TCPDF или mPDF. Библиотека jsPDF позволяет выполнять преобразование непосредственно на стороне клиента, тогда как библиотека PHP требует обработки на стороне сервера. Мы сосредоточимся на объяснении того, как использовать jsPDF, и предоставим примеры кода, охватывающие этапы внедрения библиотек, обработки содержимого HTML, создания экземпляров PDF, настройки форматов, сохранения файлов и т. д. Мы также кратко представим метод преобразования и расширенные функции с использованием PHP. Реализация, например добавление изображений, водяных знаков, верхних и нижних колонтитулов и т. д. Независимо от того, какой метод вы выберете, эта статья поможет вам эффективно выполнить преобразование HTML в PDF.

Преобразование веб-страниц в PDF является распространенным требованием, которое позволяет нам сохранять содержимое веб-сайта в фиксированном формате. Использование JavaScript или PHP для преобразования веб-страниц HTML в PDF включает в себя: использование библиотек JavaScript и использование библиотек PHP. Среди этих инструментов преобразования очень популярны библиотеки JavaScript, такие как jsPDF и html2pdf.js, а в PHP есть такие библиотеки, как TCPDF или mPDF. Мы сосредоточимся на использовании библиотеки JavaScript jsPDF для достижения преобразования. Это связано с тем, что библиотека jsPDF обеспечивает хорошую поддержку клиентов, проста в использовании и может выполнять преобразование без связи с сервером.

jsPDF — это библиотека, написанная на чистом JavaScript, которая работает во внешней среде и не требует внутренней поддержки. Чтобы использовать jsPDF, сначала необходимо ввести в проект файл его библиотеки. Вы можете установить его из репозитория jsPDF на GitHub или через npm. После появления библиотеки jsPDF вы можете использовать код JavaScript для чтения содержимого HTML и использовать API, предоставляемый jsPDF, для создания файлов PDF.

1. Введение библиотеки JSPDF.

Чтобы начать процесс преобразования, вам сначала необходимо импортировать jsPDF на свою веб-страницу. Вы можете напрямую загрузить библиотеку jsPDF и передать

Или установите с помощью npm:

npm установить jspdf

Затем импортируйте его в свой файл JavaScript:

импортировать {jsPDF} из jspdf;

2. Выберите и измените HTML-контент.

Перед созданием PDF-файла вы можете изменить HTML-код, чтобы конвертированный PDF-файл соответствовал вашим потребностям. Например, вам может потребоваться скрыть определенные элементы страницы и оставить только основной контент.

// Получаем HTML-элементы, которые необходимо преобразовать

const element = document.getElementById('content-to-pdf');

// Изменить содержимое HTML, например скрыть ненужные элементы

element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');

3. Создайте экземпляр JSPDF и преобразуйте HTML.

Создайте новый экземпляр jsPDF и используйте API, предоставляемый jsPDF, для чтения элементов HTML и преобразования их в формат PDF.

константный документ = новый jsPDF();

// Предположим, вы хотите, чтобы страница отображалась в формате PDF формата А4.

doc.html(document.body, {

обратный вызов: функция (документ) {

doc.save('веб-страница.pdf');

х: 10,

й: 10,

ширина: 190,

windowWidth: document.body.scrollWidth

});

4. Настройте формат и макет PDF-файла.

В процессе преобразования вам может потребоваться настроить формат и макет PDF-файла, например размер страницы, поля или необходимость печати в альбомной ориентации и т. д.

const doc = новый jsPDF({

ориентация: 'p', // портрет

unit: 'mm', // Единица измерения – миллиметры

format: 'a4', // Формат бумаги А4

});

5. Сохраняйте PDF-файлы

После преобразования содержимого HTML в PDF вы можете использовать метод save() для сохранения файла или иным образом обработать полученные данные PDF.

doc.save('converted-webpage.pdf'); // Сохранить PDF-файл

6. Используйте PHP для преобразования HTML в PDF.

Если вы хотите выполнить преобразование HTML в PDF на стороне сервера, вы можете использовать библиотеки PHP, такие как TCPDF или mPDF. Чтобы использовать эти библиотеки, вам необходимо сначала внедрить их в вашу среду PHP, обычно через Composer.

композитору требуется tecnickcom/tcpdf

Затем создайте объект TCPDF в сценарии PHP и используйте методы, предоставляемые объектом, для преобразования HTML-кода в формат PDF.

require_once('tcpdf_include.php');

//Создаем новый PDF-документ

$pdf = новый TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, правда, 'UTF-8', ложь);

//Устанавливаем информацию о документе

$pdf->SetCreator(PDF_CREATOR);

$pdf->SetAuthor('Ваше имя');

$pdf->SetTitle('Пример TCPDF 001');

$pdf->SetSubject('Учебное пособие по TCPDF');

$pdf->SetKeywords('TCPDF, PDF, пример, тест, руководство');

//Добавляем страницу

$pdf->AddPage();

//Устанавливаем содержимое

$html = '

Добро пожаловать в TCPDF!

$pdf->writeHTML($html, правда, ложь, правда, ложь, '');

// Вывод PDF

$pdf->Output('example_001.pdf', 'I');

7. Управление стилями и шрифтами

При преобразовании PDF-файла вам может потребоваться рассмотреть стили и шрифты в документе, чтобы гарантировать, что полученный PDF-файл сохранит стиль веб-контента.

И jsPDF, и TCPDF обеспечивают базовую поддержку стилей. Стили CSS можно использовать непосредственно в HTML или применять стили при создании PDF-файла. Однако, поскольку PDF-файлы не отображаются точно так же, как веб-страницы, могут быть небольшие различия. В jsPDF поддержку CSS можно улучшить с помощью плагинов. При использовании TCPDF вам необходимо тщательно настроить CSS, чтобы получить наилучшие результаты.

doc.setFont(Гельветика);

doc.setFontStyle(жирный);

документ.setFontSize(16);

doc.text(Привет, мир!, 10, 10);

$html = '

Это синий заголовок.

$pdf->writeHTML($html, правда, ложь, правда, ложь, '');

8. Расширенные функции и настройка.

В процессе преобразования PDF вам также может потребоваться выполнить некоторые дополнительные функции, такие как добавление верхних и нижних колонтитулов, водяных знаков, таблиц, изображений и т. д. Эти функции обычно поддерживаются библиотеками jsPDF и TCPDF, но реализованы они немного по-другому. В соответствии с конкретными потребностями вы можете вызвать соответствующую библиотечную функцию для достижения этой цели.

jsPDF предоставляет различные методы для улучшения функциональности PDF, такие как addImage() для добавления изображений, setProperties() для настройки свойств документа и т. д.

// добавляем изображение

doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

TCPDF также предоставляет мощные функции для обработки расширенного содержимого PDF.

// Установить заголовок

$pdf->setHeaderData('', 0, 'Название', 'Заголовок', массив(0,64,255), массив(0,64,128));

$pdf->setHeaderFont(Array('helvetica', '', 10));

//Добавляем водяной знак

$pdf->SetAlpha(0.3);

$pdf->Image('watermark.png', 25, 110, 160, 40, '', '', '', false, 300, '', false, false, 0);

//Восстанавливаем полную прозрачность

$pdf->SetAlpha(1);

Подводя итог, можно сказать, что использование JavaScript или PHP для преобразования веб-страниц HTML в файлы PDF включает в себя выбор соответствующей библиотеки, обработку содержимого веб-страницы, настройку макета PDF и использование расширенных функций, предоставляемых библиотекой, для достижения сложных требований к настройке. Независимо от того, выбираете ли вы jsPDF на стороне клиента или TCPDF на стороне сервера, основные шаги и методы реализации одинаковы. В ходе конкретной реализации необходимо выбирать наиболее подходящие инструменты и методы, исходя из фактических потребностей и среды проекта.