HTML-HTML5


Home / Tài liệu CNTT / HTML-HTML5 / Cách nhúng PDF trực tiếp và với plugin xem PDF trên website

Cách nhúng PDF trực tiếp và với plugin xem PDF trên website

Bạn sử dụng WordPress và muốn thêm trình xem file PDF trực tiếp trên website của mình. Bạn có thể sử dụng mã nhúng html trực tiếp hoặc lấy mã nhúng từ Google Drive hoặc sử dụng các Plugin hỗ trợ để có nhiều tính năng và hiển thị đẹp hơn. Dưới đây là các cách giúp hiển thị file PDF trên website bạn có thể tham khảo:

I. Code HTML nhúng file PDF trực tiếp trong Post hoặc Page wordpress

Hướng dẫn nhúng (embed) và xem (Preview) file PDF trong HTML, HTML5.

Dưới đây là những phương pháp hiệu quả nhất để nhúng file PDF trong HTML và xem file PDF trên các trình duyệt phổ biến Chrome, Firefox, Safari, IE… Thứ tự ưu tiên sử dụng là từ trên xuống.

Sử dụng thư viện PDF.JS

Đây chắc chắn là phương pháp hiệu quả nhất, việc sử dụng thư viện của 1 bên thư ba, giúp tương thích tốt với nhiều trình duyệt.

Sử dụng <embed> HTML Tag

Đây là cách nhanh và dễ dàng cũng như tương thích với nhiều trình duyệt.

Một ví dụ về nhúng file PDF bằng cách sử dụng thẻ <embed> để embed file PDF

Tuy nhiên từ tháng 1/2018, trình duyệt Chrome trên Android đã không còn hỗ trợ embed trực tiếp file PDF, thay vào đó bạn sử dụng thông qua Google Drive PDF viewer. Tham khảo đoạn code bên dưới.

Sử dụng <Object> HTML Tag

Đây là 1 phương pháp cũ, tuy nhiên vẫn có thể sử dụng với 1 số trình duyệt, các bạn tham khảo thêm nhé!

Sử dụng <Iframe> HTML Tag

Một phương pháp nữa là có thể sử dụng Iframe, nhưng không trực tiếp nhúng file pdf mà thông qua Google Doc

Việc chọn phương nào tốt nhất là dựa trên yêu cầu của dự án. Chúc các bạn tìm được phương pháp hiệu quả.

II. Sử dụng plugin để hiển thị file PDF trên WordPress

Dưới đây là 9 Plugin nhúng PDF cả miễn phí và trả phí tốt nhất trên WordPress bạn có thể tham khảo

1. PDF Viewer

Trình xem PDF cho phép bạn hiển thị các tệp PDF bên trong các bài đăng và trang. Plugin sử dụng mã Mozilla.j PDF.js để hiển thị các tài liệu PDF đẹp mắt với các công cụ cho phép bạn cuộn nội dung, tìm kiếm, chuyển giữa các trang, in và tải xuống các tệp PDF.

PDF Viewer

2. WP Advanced PDF

Plugin WP Advanced PDF cho phép người dùng của bạn tải xuống các bài đăng và trang của trang web ở định dạng PDF. Bạn có thể kích hoạt tải xuống PDF cho tất cả người dùng hoặc chỉ cho người dùng đã đăng ký. Bạn có thể sử dụng phông chữ tùy chỉnh, logo và thậm chí thêm hình mờ watermark vào tệp PDF của mình.

WP Advanced PDF

3. PDF & Print by BestWebSoft

Plugin này thêm nút tải xuống và in PDF vào các bài đăng, trang và loại bài đăng tùy chỉnh của WordPress. Bạn có thể thêm tiêu đề trang web, hình ảnh nổi bật, kiểu tùy chỉnh và phông chữ. Plugin cũng có thể thực thi các mã shortcode khi tạo tệp PDF.

PDF & Print by BestWebSoft – WordPress Posts and Pages PDF Generator Plugin

4. PDF Image Generator

DF Image Generator tạo ảnh bìa cho tệp PDF mà bạn thêm trong bài đăng WordPress để cho người dùng tải xuống. Plugin có thể tạo ảnh bìa này bằng cách sử dụng trang đầu tiên trong tệp PDF hoặc hình ảnh nổi bật. Biểu tượng tải xuống sau đó sẽ hiển thị hình ảnh thu nhỏ được liên kết với tệp PDF.

PDF Image Generator

5. PDF Thumbnails

Giống như plugin trước, hình đại diện PDF cũng tạo ra hình thu nhỏ từ trang đầu tiên của tệp PDF của bạn trong quá trình tải lên. Tuy nhiên, tệp PDF của bạn và hình ảnh thu nhỏ vẫn là hai tệp riêng biệt. Bạn sẽ cần phải chèn thủ công hình ảnh được tạo và sau đó liên kết nó với tệp PDF.

PDF Thumbnails

6. DK PDF

Plugin mạnh mẽ này cho phép người dùng tải xuống các bài đăng và trang của bạn ở định dạng PDF bằng cách nhấp vào nút. Nó có một giao diện dễ dàng để thiết lập vị trí của nút tải xuống PDF và tạo tiêu đề và chân trang tùy chỉnh của riêng bạn.

Plugin cũng tích hợp với các mã shortcode cho phép bạn kiểm soát nội dung bên trong PDF. Bạn cũng có thể ẩn nội dung mà bạn không muốn đưa vào trang tải xuống PDF.

DK PDF

7. PDF Embedder

plugin PDF Embedder cho phép bạn nhúng các tệp PDF trong các bài đăng và trang WordPress. Plugin sử dụng JavaScript để nhúng các tệp với thanh công cụ đầy đủ chức năng cho phép người dùng phóng to, điều hướng và thậm chí tải xuống tệp PDF.

PDF Embedder

8. WordPress PDF Light Viewer Plugin

Plugin WordPress PDF Lite Viewer đặc biệt hữu ích trong việc nhúng các tệp PDF có kích thước lớn. Do sử dụng thư viện JavaScript Turn.js để hiển thị các tệp PDF dưới dạng sách lật với điều hướng hình thu nhỏ. Trình xem PDF có tích hợp với các nút phóng to, điều hướng và toàn màn hình. Nó cũng hoàn toàn đáp ứng và có thể hoạt động trên các thiết bị có kích cỡ khác nhau.

WordPress PDF Light Viewer Plugin

9. BSK PDF Manager

BSK PDF Manager là trình quản lý tệp PDF trên trang web WordPress. Nếu bạn tải lên các tệp PDF, thì bạn có thể muốn phân loại chúng, hiển thị chúng dưới dạng danh sách hoặc một bản tải xuống. Plugin này giúp quản lý tệp PDF trong WordPress dễ dàng hơn.

BSK PDF Manager

10. SearchWP

SearchWP là một plugin WordPress trả phí. Nó cho phép bạn thêm trải nghiệm tìm kiếm tốt hơn vào trang web WordPress của bạn. Một trong những tính năng của plugin này là khả năng tìm kiếm văn bản bên trong các tệp PDF. Tuy nhiên, nó không thể tìm kiếm các tệp PDF được mã hóa, lưu trữ bên ngoài thư viện phương tiện hoặc có hình ảnh dưới dạng văn bản.

https://www.wpbeginner.com/refer/searchwp/

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới.

Mục Lục