Hướng dẫn sử dụng addon Gravity PDF dành cho WordPress

Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

Nếu bạn đã sử dụng plugin Gravity Forms trong WordPress và biết đến thư viện các addon thì Gravity PDF là một addon cho phép xuất nội dung người dùng nhập ra PDF và có thể tải xuống ngay sau khi nhập xong form.

Cài đặt GravityPDF như thế nào?

Là một addon của Gravity Form, bạn có thể ghé thăm gravitypdf.com để tải về addon này. Quan trọng nhất là phải cài đặt và kích hoạt plugin Gravity Form trong website WordPress của bạn rồi nhé.

Hướng dẫn tùy chỉnh cài đặt

Sau khi kích hoạt, bạn có thể truy cập trong Forms > Settings > PDF.

Cấu hình cơ bản – General

Cấu hình cơ bản cho bạn thiết lập kích thước bản xuất ra PDF (A4, letter,..), lựa chọn Template mặc định, Font, màu, kích thước, lựa chọn xem hay tải xuống bản pdf khi xem danh sách người nhập form và bật chế độ debug.

Thiết lập cơ bản của Gravity PDF
Thiết lập cơ bản của Gravity PDF

Cấu hình Tools

Mục “Setup Custom Templates” cung cấp việc tạo thư mục PDF /wp-content/uploads/PDF_EXTENDED_TEMPLATES cùng 4 template mẫu được Gravity Form chuyển vào. Bạn click vào “Run Setup” để thiết lập nó nếu chưa thấy có thư mục này trong project.

Cài đặt Custom Template trong GravityPDF

Nếu bạn muốn cài font riêng (của bạn) trong file PDF, bạn vào mục “Fonts” và nhập thông tin font của bạn.

Cài đặt font riêng trong GravityPDF

Install Core Fonts” cung cấp tùy chọn cho phép cài hơn 80 fonts có sẵn của GravityPDF.

Tải core font trong GravityPDF

Hướng dẫn tạo custom template trong GravityPDF

Một chức năng thú vị của GravityPDF là cho bạn tự tạo custom template cho file PDF xuất ra. Tài liệu hướng dẫn bạn có thể xem tại đây.

Các bước cài đặt Custom Template

  1. Chạy “Run Setup” trong mục “Setup Custom Template” vừa nêu ở trên (nếu bạn chưa tạo custom template nào).
  2. Truy cập thư mục /wp-content/uploads/PDF_EXTENDED_TEMPLATES và tạo hai file với tên giống nhau:
    your-template.php
    config/your-template.php
  3. Trong file your-template.php, tối thiểu bạn cần có Comment để template có thể nhận diện:
    /** * Template Name: Zadani **/
  4. Bạn có thể cấu hình để tất cả form nhận template này (mục Cài đặt cơ bản – General ở trên) hoặc chỉ định các form riêng lẻ nhận PDF bằng cách vào sub-menu PDF của từng form:
    Cấu hình PDF template của Form trong Gravity Forms
  5. Lựa chọn Template cho tài liệu bạn muốn tùy chỉnh
    Chọn PDF template trong Gravity PDF

Hướng dẫn tắt/bật các tùy chọn trong custom PDF Template

Với một PDF template, ta có thể bật tắt các cấu hình settings hiển thị trong tab Template. Thực chất, đây là các field do GravityPDF tạo trước và ta có thể thay đổi điều kiện hiển thị mặc định của chúng.

Chẳng hạn, trong ví dụ dưới đây:

  • Core: Tôi chỉ bật first_header, tức Header có thể nhập trong backend GravityPDF.
  • Tôi thêm 2 trường bổ sung nhập là Headline (định dạng nhập là input text) và Content (định dạng nhập là Rich Text – sử dụng TinyMCE).

https://gist.github.com/khoipro/795f08ddf174df5649acd9de5c13b590

Bây giờ, bạn cần làm nó hiển thị ra bằng cách output các giá trị trong template:

Trong file your-template.php (nằm ngoài thư mục config), bạn bắt đầu với code mẫu như sau:

https://gist.github.com/khoipro/0b1880ee180d1b516e2e910700b7fc78

Phần tài liệu này bạn có thể tìm đọc thêm tài liệu về giao diện PDF ở đây.

Hướng dẫn debug trong custom page template

Để xem thử kết quả PDF, bạn có thể truy cập vào Entries và click vào “View PDF“:

Xem thử bản PDF của Entry

Địa chỉ xem có dạng: http://your-domain.com/pdf/5c4105143597b/40/

Do bản PDF bạn không thể inspector để debug, GravityPDF cung cấp hai query cho phép bạn xem được layout bằng HTML và giá trị data:

Chẳng hạn: http://your-domain.com/pdf/5c4105143597b/40/?html=1

Sẽ cho kết quả là mở trên trình duyệt như một trang web thông thường.

Lưu ý: GravityPDF sử dụng thư viện PHP mPDF để generate ra file PDF, nên bạn cần tham khảo thêm cách viết để hiển thị giống như trong file PDF.

http://your-domain.com/pdf/5c4105143597b/40/?data=1

Sẽ cho kết quả là 1 Array giúp bạn debug data.

Các lưu ý khác

Để tạo bố cục cột trong PDF, bạn nên sử dụng float: left hoặc kết hợp với table.

Nếu bạn có sử dụng Pantheon, để upload custom PDF template lên, bạn lưu ý phải tải xuống assets của site hiện tại sau đó tải lên kèm thư mục custom của GravityPDF.

Kết luận

GravityPDF cung cấp khả năng tùy chỉnh file PDF, nhưng cũng yêu cầu bạn cần test và kiểm thử khá nhiều cho tới khi đạt được mục đích. Hi vọng hướng dẫn trên của Code Tốt sẽ giúp bạn làm quen và có thể xử lý phần template PDF tốt nhất.

avatar
  Subscribe  
Notify of