Коли ви працюєте над бекендом для свого застосунку, чи замислювалися ви коли-небудь про створення PDF? Можливо, не замислювалися, але погодьтеся — PDF файли скрізь! Від рахунків і звітів до сертифікатів і меню ресторанів, вони є важливою частиною нашого цифрового життя. Але як створити чистий, відполірований PDF прямо з вашого Node.js застосунку? Зустрічайте Puppeteer та трохи магії jsPDF!
Чому варто генерувати PDF?
Кожен розробник хоч раз задумувався: "Було б круто, якби мій застосунок міг генерувати стильний PDF?" Можливо, ви автоматизуєте рахунки для платформи електронної комерції або створюєте елегантні сертифікати для онлайн-курсу. Як би там не було, генерація PDF — це як вишенка на торті вашого бекенд-сервісу.
Але PDF файли — це не так просто. Йдеться не тільки про друк тексту; важлива точність, макет і часто зображення. Ось тут на допомогу приходить Puppeteer — безголовий браузер для Node.js, який працює як супергерой.
УВАГА: Припускається, що ви вже знаєте, як створювати базовий Node.js застосунок
УВАГА: Для роботи потрібні й інші пакети, окрім згаданих нижче, такі як dotenv, express та інші. Ці пакети не розглядаються в цій статті
Динамічний дует: Puppeteer та jsPDF
Давайте зануримось у код. Ось як можна використати Puppeteer, щоб захопити HTML контент і перетворити його на чудовий PDF:
const fs = require('fs');
const { jsPDF } = require('jspdf');
const puppeteer = require('puppeteer');
const path = require('path');
module.exports.generatePdf = async (templateData, pdfPath) => {
try {
console.log('Generating PDF at path:', pdfPath);
// Запускаємо Puppeteer у безголовому режимі
const browser = await puppeteer.launch({
headless: true,
args: ["--no-sandbox"],
});
const page = await browser.newPage();
// Встановлюємо контент сторінки
await page.setContent(templateData);
// Захоплюємо сторінку як скріншот
const screenshot = await page.screenshot({ encoding: 'base64', fullPage: true });
const imgData = `data:image/png;base64,${screenshot}`;
// Ініціалізуємо jsPDF
const doc = new jsPDF('p');
doc.setFontSize(12);
doc.addImage(imgData, 'PNG', 15, 20, 180, 0); // Налаштовуємо позицію та розмір
console.log('Saving PDF');
// Перевіряємо, чи існує директорія
const dirPath = path.dirname(pdfPath);
if (!fs.existsSync(dirPath)) {
fs.mkdirSync(dirPath, { recursive: true });
}
// Зберігаємо PDF за вказаним шляхом
doc.save(pdfPath);
console.log(`PDF успішно збережено до ${pdfPath}`);
await browser.close();
} catch (error) {
console.error('Помилка при створенні PDF:', error);
}
};
Що тут відбувається?
Розглянемо цей процес детальніше:
-
Запуск Puppeteer:
Puppeteer запускає безголовий браузер, який працює невидимо у фоновому режимі. -
Завантаження вашого HTML:
Використовуючи page.setContent(templateData), передаємо Puppeteer HTML контент для конвертації. -
Магія скріншотів:
Метод page.screenshot захоплює відрендерений HTML як зображення. Це критично важливо для збереження макету. -
Перетворення у PDF:
За допомогою jsPDF ми беремо скріншот і додаємо його на сторінку PDF. Налаштовуємо позицію та розмір за потребою. -
Збереження PDF:
Зберігаємо готовий PDF за вказаним шляхом, створюючи необхідні директорії, якщо вони не існують.
Чому цей підхід вартий уваги
- Точність: Puppeteer гарантує, що HTML буде відображений так, як у браузері.
- Гнучкість: Ви можете працювати з зображеннями, складними макетами та навіть анімаціями (хоч вони й будуть статичними у PDF).
- Зручність: Завдяки jsPDF, ви маєте детальний контроль над шрифтами, зображеннями та їхнім розташуванням.
Поради для успіху
- Шаблони без меж: Використовуйте бібліотеки, такі як Handlebars або EJS, для динамічного заповнення ваших HTML шаблонів.
- Стілювання: Використовуйте CSS для того, щоб ваші PDF виглядали професійно.
- Тестування: Переглядайте відрендерений HTML у браузері перед генерацією PDF, щоб переконатися, що все виглядає правильно.
Висновок
Генерація PDF у Node.js не повинна бути нудною або складною. З Puppeteer та jsPDF ви можете автоматизувати створення чудових, високоякісних PDF без зайвих зусиль. Тож наступного разу, коли вам доведеться генерувати PDF, не хвилюйтеся — прийміть цей процес і отримуйте задоволення від створення чогось неймовірного!
Який ваш улюблений випадок використання для генерації PDF? Поділіться своїми думками нижче — я вас уважно слухаю!
Перекладено з: The Fun World of PDF Generation in Node.js with Puppeteer