# 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](#1-cài-đặt-browsershot-và-các-phụ-thuộc) - [2. Tạo mẫu Blade với Tailwind](#2-tạo-mẫu-blade-với-tailwind) - [3. Tạo PDF từ mẫu Blade](#3-tạo-pdf-từ-mẫu-blade) - [4. Mẹo sử dụng Tailwind với Browsershot](#4-mẹo-sử-dụng-tailwind-với-browsershot) - [5. Nâng cao: Biên dịch Tailwind](#5-nâng-cao-biên-dịch-tailwind) - [6. Kết luận](#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/browsershot ``` ### Cà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 node ``` ### Cài đặt Puppeteer toàn cục Tiếp theo, cài đặt Puppeteer toàn cục: ``` npm install -g puppeteer ``` > Lư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: ``` Ví dụ PDF

Xin chào, PDF!

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.

``` ## 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: 1. Sử dụng CDN cho Tailwind trong mẫu Blade. 2. Đối với phông chữ tùy chỉnh, sử dụng web fonts hoặc định nghĩa `@font-face` inline. 3. 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!

Bài viết về chủ đề#browsershot

Tổng hợp các bài viết về #browsershot

Hướng dẫn tạo PDF hỗ trợ CSS hiện đại với Laravel#tailwindcss#laravel#pdf#browsershot

Chủ đề phổ biến

Hướng dẫn tạo PDF hỗ trợ CSS hiện đại với Laravel