Hướng dẫn tạo PDF hỗ trợ CSS hiện đại như Tailwind trong Laravel
Tạo PDF trong Laravel với CSS hiện đại như Tailwind có thể là một thách thức. Các trình tạo PDF truyền thống thường gặp khó khăn với Flexbox, Grid hoặc các lớp của Tailwind. Spatie Browsershot sử dụng headless Chrome để hiển thị HTML, giúp bạn tận dụng tối đa CSS và JavaScript hiện đại.
Mục lục
- 1. Cài đặt Browsershot và các phụ thuộc
- 2. Tạo mẫu Blade với Tailwind
- 3. Tạo PDF từ mẫu Blade
- 4. Mẹo sử dụng Tailwind với Browsershot
- 5. Nâng cao: Biên dịch Tailwind
- 6. Kết luận
1. Cài đặt Browsershot và các phụ thuộc
Để bắt đầu, bạn cần cài đặt Browsershot và các phụ thuộc cần thiết khác. Thực hiện cài đặt thông qua Composer:
composer require spatie/browsershotCài đặt Node.js và npm
Browsershot cần có Node.js và npm (để sử dụng Puppeteer). Bạn có thể cài đặt Node.js bằng nvm:
nvm install node
nvm use nodeCài đặt Puppeteer toàn cục
Tiếp theo, cài đặt Puppeteer toàn cục:
npm install -g puppeteerLưu ý: Chromium sẽ được tải xuống tự động khi Puppeteer được cài đặt.
2. Tạo mẫu Blade với Tailwind
Bước tiếp theo là tạo một mẫu Blade sử dụng Tailwind. Tạo file resources/views/pdf/template.blade.php với nội dung sau:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ PDF</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-10">
<div class="max-w-2xl mx-auto bg-white p-8 rounded shadow">
<h1 class="text-4xl font-bold text-center text-blue-600">Xin chào, PDF!</h1>
<p class="mt-4 text-gray-700">PDF này được định dạng hoàn toàn với Tailwind CSS và các tính năng CSS hiện đại.</p>
</div>
</body>
</html>3. Tạo PDF từ mẫu Blade
Bây giờ, bạn có thể sử dụng Browsershot để tạo PDF từ mẫu Blade. Thêm đoạn mã sau vào một route hoặc controller:
use Spatie\Browsershot\Browsershot;
Route::get('/pdf', function () {
$pdfPath = storage_path('app/public/example.pdf');
Browsershot::html(view('pdf.template')->render())
->format('A4')
->landscape()
->showBackground()
->save($pdfPath);
return response()->download($pdfPath);
});Mẹo:
showBackground()để hiển thị nền.format('A4')để đặt kích thước trang..pdf()xuất trực tiếp đến trình duyệt.
4. Mẹo sử dụng Tailwind với Browsershot
Dưới đây là một số mẹo hữu ích khi sử dụng Tailwind với Browsershot:
- Sử dụng CDN cho Tailwind trong mẫu Blade.
- Đối với phông chữ tùy chỉnh, sử dụng web fonts hoặc định nghĩa
@font-faceinline. - Sử dụng URL tuyệt đối cho hình ảnh.
5. Nâng cao: Biên dịch Tailwind
Nếu bạn đang sử dụng Laravel Mix hoặc Vite, bạn có thể cấu hình Browsershot như sau:
Browsershot::html(view('pdf.template')->render())
->setNodeBinary('/usr/bin/node')
->setNpmBinary('/usr/bin/npm')
->save($pdfPath);6. Kết luận
Browsershot cho phép Laravel tạo PDF với sự hỗ trợ đầy đủ cho CSS hiện đại, Tailwind, Flexbox, Grid và JavaScript. Điều này rất lý tưởng cho việc tạo hóa đơn, báo cáo, chứng chỉ hoặc bất kỳ nội dung PDF nào được định dạng đẹp mắt.
Thực hành tốt nhất
- Luôn kiểm tra PDF đã tạo trên nhiều trình duyệt để đảm bảo tính tương thích.
- Sử dụng các lớp CSS đơn giản để tránh xung đột khi tạo PDF.
Cạm bẫy thường gặp
- Không sử dụng các thuộc tính CSS không được hỗ trợ bởi Puppeteer.
- Đảm bảo rằng tất cả đường dẫn tài nguyên đều đúng và có thể truy cập được.
Mẹo hiệu suất
- Tối ưu hóa kích thước tệp PDF bằng cách giảm độ phân giải hình ảnh.
- Sử dụng lazy loading cho hình ảnh nếu cần.
Giải quyết sự cố
- Nếu PDF không hiển thị đúng, kiểm tra log của Puppeteer để tìm lỗi.
- Đảm bảo rằng các thư viện CSS được tải đúng cách và không có lỗi mạng.
Câu hỏi thường gặp
1. Tôi có thể sử dụng các thư viện CSS khác không?
Có, bạn có thể sử dụng các thư viện CSS khác miễn là chúng tương thích với Puppeteer.
2. Có cách nào để tùy chỉnh kích thước PDF không?
Có, bạn có thể sử dụng phương thức format() để chỉ định kích thước trang.
3. PDF có thể bao gồm hình ảnh động không?
Không, PDF tĩnh không hỗ trợ hình ảnh động.
Hãy bắt đầu tạo PDF với CSS hiện đại ngay hôm nay và nâng cao trải nghiệm người dùng với Laravel!
