Hướng Dẫn Từng Bước Xuất PDF Với Froala WYSIWYG Editor

Khi bạn là một lập trình viên hoặc người dùng công nghệ, việc tìm kiếm các công cụ giúp tối ưu hóa quy trình làm việc và nâng cao năng suất là điều cần thiết. Hôm nay, chúng tôi xin giới thiệu đến bạn Froala WYSIWYG Editor và tính năng xuất PDF mạnh mẽ của nó.

Froala là một trình soạn thảo văn bản thân thiện với người dùng, cho phép bạn tạo và định dạng nội dung một cách dễ dàng. Dù bạn đang viết bài blog, soạn thảo tài liệu kỹ thuật hay thiết kế tài liệu tiếp thị, giao diện trực quan và chức năng phong phú của Froala sẽ là một tài sản quý giá trong kho công cụ sáng tạo nội dung của bạn.

Trong bài viết này, chúng ta sẽ đi sâu vào tính năng xuất PDF của Froala WYSIWYG Editor, hướng dẫn bạn từng bước để thiết lập và tận dụng nó một cách hiệu quả.

Nội Dung Chính

Froala Editor cung cấp tính năng xuất PDF tích hợp cho các tài liệu chuyên nghiệp.
Sử dụng thư viện html2pdf.js cho chức năng xuất PDF.
Tùy chỉnh đầu ra PDF với kích thước trang, hướng, lề, và nhiều hơn nữa.
Quy tắc CSS page-break cho phép bạn kiểm soát chính xác bố cục tài liệu.
Nâng cao năng suất cho bloggers, lập trình viên và đội ngũ nội dung.

Tải Xuống và Thiết Lập Froala WYSIWYG Editor

Để bắt đầu, bạn cần tải xuống Froala WYSIWYG Editor. Bạn có thể truy cập trang giá cả và chọn gói phù hợp nhất với nhu cầu của bạn. Dù bạn là lập trình viên độc lập hay là một phần của một đội ngũ lớn hơn, Froala cung cấp nhiều tùy chọn cấp phép để đáp ứng yêu cầu của bạn. Nếu bạn muốn thử nghiệm trước, bạn cũng có thể tận dụng tùy chọn dùng thử miễn phí.

Sau khi tải xuống và cài đặt Froala WYSIWYG Editor, hãy thực hiện các bước sau để thiết lập:

Bao gồm các tệp CSS và JavaScript cần thiết trong tài liệu HTML của bạn.
Khởi tạo Froala Editor bằng cách thêm phần tử HTML phù hợp và mã JavaScript.
Tùy chỉnh giao diện và chức năng của trình soạn thảo bằng cách cấu hình các tùy chọn có sẵn.

Dưới đây là ví dụ về cách thiết lập Froala WYSIWYG Editor:

html Copy

<!DOCTYPE html>
<html>

<head>
    <title>Froala WYSIWYG Editor</title>
    <!-- Bao gồm CSS của Froala -->
    <link href="{{editor__download__folder}}/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <!-- Phần tử HTML nơi trình soạn thảo sẽ được khởi tạo -->
    <div id="editor">
        <p>Đây là nội dung ban đầu của trình soạn thảo.</p>
    </div>

    <!-- Bao gồm các tệp JS của Froala Editor -->
    <script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.pkgd.min.js"></script>

    <script>
        // Khởi tạo Froala Editor
        new FroalaEditor('#editor');
    </script>
</body>

</html>

Ví dụ trên thể hiện việc thiết lập cơ bản cho Froala WYSIWYG Editor. Bạn có thể tùy chỉnh thêm trình soạn thảo bằng cách thêm các cấu hình khác để phù hợp với nhu cầu cụ thể của bạn.

Khám Phá Tính Năng Xuất PDF

Bây giờ bạn đã thiết lập Froala WYSIWYG Editor, hãy cùng khám phá tính năng xuất PDF. Chức năng mạnh mẽ này cho phép bạn chuyển đổi nội dung của mình thành tài liệu PDF chuyên nghiệp, giúp dễ dàng chia sẻ, in ấn hoặc lưu trữ công việc của bạn.

Vì chúng ta đang sử dụng phiên bản gói của Froala "froala_editor.pkgd.min.js", tính năng này được bao gồm mặc định.

Nếu bạn đang sử dụng phiên bản cơ bản của Froala (froala_editor.min.js), bạn sẽ cần bao gồm plugin xuất PDF của Froala trong dự án của bạn.

html Copy

<script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.min.js"></script>
<script type="text/javascript" src="{{editor__download__folder}}/js/plugins/print.min.js"></script>

Hãy chắc chắn rằng bạn bao gồm plugin “print” trong danh sách các plugin đã kích hoạt:

javascript Copy

new FroalaEditor('#editor', { 
       pluginsEnabled: ['print'],
});

Với plugin đã được thiết lập, bạn có thể thêm nút xuất PDF vào thanh công cụ của Froala Editor. Dưới đây là ví dụ về cách thực hiện điều đó:

javascript Copy

new FroalaEditor('#editor', { 
       pluginsEnabled: ['print'],
       toolbarButtons: ['getPDF'],
});

Cấu hình này sẽ thêm nút “Xuất PDF” vào thanh công cụ của Froala Editor. Tuy nhiên, người dùng vẫn không thể xuất nội dung dưới dạng tài liệu PDF. Điều này là do tính năng xuất PDF phụ thuộc vào thư viện mã nguồn mở “html2pdf.js“. Bạn sẽ cần bao gồm thư viện này trong dự án của mình trước các script của Froala.

html Copy

<!-- Bao gồm thư viện html2pdf -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" integrity="sha512-YcsIPGdhPK4P/uRW6/sruonlYj+Q7UHWeKfTAkBW+g83NKM+jMJFJ4iAPfSnVp7BKD4dKMHmVSvICUbE/V1sSw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Bao gồm các tệp JS của Froala Editor -->
<script type="text/javascript" src="{{editor__download__folder}}/js/froala_editor.min.js"></script>
<script type="text/javascript" src="{{editor__download__folder}}/js/plugins/print.min.js"></script>

Lưu ý rằng, như đã đề cập trên trang html2pdf.js, đã có một số vấn đề được báo cáo với phiên bản mới nhất của html2pdf.js (v0.10), vì vậy hiện tại nên sử dụng phiên bản 0.9.3.

Xuất Nội Dung Dưới Dạng PDF

Bây giờ bạn đã thiết lập tính năng xuất PDF, hãy cùng đi qua quy trình xuất nội dung của bạn dưới dạng tài liệu PDF.

Thêm Nội Dung vào Froala Editor: Bắt đầu bằng cách thêm nội dung mong muốn vào Froala WYSIWYG Editor. Nội dung này có thể là một bài blog, hướng dẫn kỹ thuật hoặc bất kỳ loại nội dung nào bạn muốn xuất dưới dạng PDF.
Nhấp Vào Nút Xuất PDF: Khi bạn đã hoàn tất việc chỉnh sửa nội dung, hãy tìm nút “Xuất PDF” trong thanh công cụ Froala Editor và nhấp vào đó.

Vậy là xong! Bạn đã xuất thành công nội dung của Froala WYSIWYG Editor dưới dạng tài liệu PDF. Tính năng này đặc biệt hữu ích khi bạn cần chia sẻ công việc của mình với người khác, in ấn hoặc lưu trữ cho các tham chiếu trong tương lai.

Xuất Nội Dung Editor Dưới Dạng PDF Một Cách Tự Động

Plugin In của Froala cung cấp phương thức toPDF() cho phép bạn xuất nội dung của trình soạn thảo thành tài liệu PDF một cách tự động. Điều này có thể hữu ích khi bạn muốn kích hoạt xuất PDF sau một sự kiện cụ thể, chẳng hạn như khi trình soạn thảo được khởi tạo.

Dưới đây là ví dụ về cách xuất nội dung thành PDF ngay sau khi trình soạn thảo được khởi tạo:

javascript Copy

// Khởi tạo Froala Editor
new FroalaEditor('#editor', {
    pluginsEnabled: ['print'],
    toolbarButtons: ['getPDF'],
}, function () {
    this.print.toPDF();
});

Phương thức toPDF() sử dụng các tùy chọn xuất PDF mặc định của Froala.

Tùy Chỉnh Xuất PDF

Nếu bạn muốn tùy chỉnh tài liệu PDF được xuất, chẳng hạn như đặt hướng thành chân đứng thay vì ngang, bạn có thể sử dụng tùy chọn html2pdf do Froala Editor cung cấp.

Tùy chọn html2pdf trả về một hàm cho phép bạn truy cập đối tượng Worker của html2pdf.js. Với đối tượng này, bạn có thể kích hoạt bất kỳ phương thức html2pdf nào. Đọc thêm về cách sử dụng nó trong tài liệu html2pdf.

Bạn có thể sử dụng đối tượng này để cấu hình các thiết lập PDF và sau đó xuất nội dung của trình soạn thảo theo định dạng editor.opts.html2pdf().set(configration).from(editor.el).save();.

Dưới đây là ví dụ:

javascript Copy

// Khởi tạo Froala Editor
new FroalaEditor('#editor', {
    pluginsEnabled: ['print'],
    toolbarButtons: ['getPDF'],
}, function () {
    let editor = this;
    editor.opts.html2pdf().set({
        margin: [10, 20],
        html2canvas: { useCORS: !0 },
        filename: 'new name.pdf',
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    }).from(editor.el).save();
});

Trong ví dụ này, chúng ta đang đặt các tùy chọn PDF sau:

margin: Xác định các lề của PDF theo điểm.
html2canvas.useCORS: Kích hoạt CORS (Cross-Origin Resource Sharing) cho thư viện HTML2Canvas, được sử dụng để chụp nội dung của trình soạn thảo.
filename: Đặt tên cho tệp PDF xuất ra.
jsPDF: Cấu hình các thiết lập của tài liệu PDF, chẳng hạn như đơn vị, định dạng trang và hướng.

Sau khi đặt các tùy chọn, chúng ta sử dụng phương thức from(editor.el) để chỉ định phần tử trình soạn thảo là nội dung sẽ được chuyển đổi thành PDF, sau đó gọi phương thức save() để tạo và tải xuống tệp PDF.

Hãy nhớ, việc đặt cấu hình không chính xác có thể dẫn đến tệp PDF trống hoặc định dạng sai, vì vậy hãy cẩn thận khi tùy chỉnh xuất PDF.

Thêm Ngắt Trang

Thư viện html2pdf.js tự động thêm ngắt trang dựa trên các kiểu CSS của bạn. Bạn có thể sử dụng các thuộc tính CSS như break-before, break-after, và break-inside để kiểm soát nơi ngắt trang xảy ra.

Ví dụ, bạn có thể thêm ngắt trang trước một phần tử cụ thể bằng cách áp dụng kiểu break-before: always cho nó. Điều này đảm bảo rằng phần tử bắt đầu ở một trang mới khi bạn xuất nội dung thành PDF.

Ngoài ra, bạn có thể thêm lớp html2pdf__page-break vào bất kỳ phần tử nào, và html2pdf.js sẽ chèn một ngắt trang sau phần tử đó. Đây là một tính năng cũ, nhưng vẫn có thể hữu ích trong một số trường hợp.

Tóm lại, hãy đảm bảo thêm các kiểu CSS ngắt trang phù hợp cho nội dung của bạn. Khi bạn xuất nội dung của Froala Editor thành PDF, html2pdf.js sẽ tự động chèn các ngắt trang dựa trên các quy tắc CSS của bạn, tạo ra một tài liệu PDF có định dạng tốt.

Giải Quyết Các Vấn Đề Xuất PDF Thường Gặp

Ngay cả khi đã thiết lập đúng, bạn có thể gặp một số vấn đề khi sử dụng tính năng xuất PDF trong Froala. Dưới đây là một số vấn đề phổ biến và cách khắc phục:

Đầu Ra PDF Trống Hoặc Rỗng
- Nguyên Nhân: Thư viện html2pdf.js thiếu hoặc cấu hình không chính xác.
- Khắc Phục: Đảm bảo bạn đang sử dụng phiên bản 0.9.3 (không phải 0.10, có vấn đề đã biết) và rằng nó đã được tải trước các script của Froala.
Ngắt Trang Không Chính Xác
- Nguyên Nhân: Thiếu quy tắc CSS ngắt.
- Khắc Phục: Sử dụng các thuộc tính CSS break-before, break-after hoặc break-inside. Để kiểm soát chi tiết hơn, áp dụng lớp html2pdf__page-break cho các phần tử.
css Copy
```
.my-section {
  break-before: always; /* Buộc phần này bắt đầu trên một trang mới */
}
```
Phông Chữ Hoặc Hình Ảnh Không Tải
- Nguyên Nhân: Giới hạn CORS.
- Khắc Phục: Kích hoạt html2canvas: { useCORS: true } trong cấu hình của bạn và đảm bảo rằng các tài sản bên ngoài cho phép yêu cầu cross-origin.
javascript Copy
```
editor.opts.html2pdf().set({
  html2canvas: { useCORS: true }
}).from(editor.el).save();
```
Vấn Đề Tên Tệp
- Nguyên Nhân: Không có tên tệp được chỉ định trong cấu hình.
- Khắc Phục: Thêm filename: ‘yourfile.pdf’ vào tùy chọn html2pdf().set().
Kích Thước Tệp Lớn
- Nguyên Nhân: Hình ảnh độ phân giải cao hoặc nội dung chưa nén.
- Khắc Phục: Giảm kích thước hình ảnh trước khi tải lên, hoặc sử dụng các phép biến đổi của Filestack để tối ưu hóa tài sản trước khi xuất.

Kết Luận

Trong bài viết này, chúng ta đã khám phá tính năng xuất PDF mạnh mẽ của Froala WYSIWYG Editor. Bằng cách làm theo hướng dẫn từng bước, bây giờ bạn đã biết cách tải xuống và thiết lập Froala Editor, cũng như cách tận dụng tính năng xuất PDF để tối ưu hóa quy trình sáng tạo và chia sẻ nội dung của bạn.

Dù bạn là người dùng công nghệ hay lập trình viên mới vào nghề, Froala WYSIWYG Editor và tính năng xuất PDF của nó có thể trở thành một tài sản quý giá trong bộ công cụ sáng tạo nội dung của bạn. Bằng cách thành thạo những công cụ này, bạn sẽ có thể tạo ra các tài liệu chuyên nghiệp, nâng cao năng suất và cung cấp nội dung chất lượng cao đến khán giả của mình.

Bài viết được xuất bản lần đầu trên blog của Froala.

Hướng Dẫn Xuất PDF Với Froala WYSIWYG Editor

Hướng Dẫn Từng Bước Xuất PDF Với Froala WYSIWYG Editor

Nội Dung Chính

Tải Xuống và Thiết Lập Froala WYSIWYG Editor

Khám Phá Tính Năng Xuất PDF

Xuất Nội Dung Dưới Dạng PDF

Xuất Nội Dung Editor Dưới Dạng PDF Một Cách Tự Động

Tùy Chỉnh Xuất PDF

Thêm Ngắt Trang

Giải Quyết Các Vấn Đề Xuất PDF Thường Gặp

Kết Luận

Bình luận