Xem PDF dưới dạng HTML

Trong bài viết này (đọc trong năm phút), bạn sẽ tìm hiểu về hai cách đơn giản (và miễn phí). ) phương pháp hiển thị tệp PDF trong trình duyệt và cách bạn có thể nhanh chóng triển khai chúng trên trang web của mình

Hiển thị PDF trên trình duyệt gốc

Vì PDF là định dạng được sử dụng rộng rãi nên tất cả các trình duyệt hiện đại đều có hỗ trợ PDF tích hợp. Chúng ta có thể tận dụng lợi thế này bằng cách sử dụng các phần tử HTML để nhúng trực tiếp tệp PDF vào trang web của mình, như thế này

Đây là mã

Tôi đã sử dụng một URL cho các giá trị datasrc. Các điểm này trỏ tới tệp PDF mà tôi muốn mở từ một URL. Nhưng thay vào đó, tôi có thể mở tệp cục bộ bằng cách hoán đổi URL cho đường dẫn tệp (e. g. /path/to/file.pdf)

Giao diện người dùng của trình xem PDF sẽ hơi khác một chút tùy thuộc vào trình duyệt của bạn

Trình xem PDF được nhúng vào trang web trong ChromeTrình xem PDF được nhúng vào trang web trong Safari
Xem PDF dưới dạng HTML
Xem PDF dưới dạng HTML
Trình xem PDF được nhúng vào trang web trong FireFoxTrình xem PDF được nhúng vào trang web trong Edge
Xem PDF dưới dạng HTML
Xem PDF dưới dạng HTML

Phương pháp này sẽ hoạt động trong tất cả các phiên bản Chrome, Safari, Firefox và Edge hiện đại dành cho máy tính để bàn và thiết bị di động. (Nó sẽ không hoạt động trong Internet Explorer. ) Nếu bạn cần hỗ trợ Internet Explorer hoặc tùy chỉnh giao diện người dùng, bạn nên xem xét phương pháp tiếp theo -- PDF. kết xuất js.

Nhúng PDF vào HTML với PDF miễn phí. Trình xem nhanh js

PDF. js Express Viewer là một tệp PDF miễn phí. js bao bọc giao diện người dùng dựa trên React hiện đại xung quanh PDF nguồn mở. công cụ kết xuất js. PDF. js ban đầu được phát triển bởi Mozilla và được duy trì bởi một cộng đồng mã nguồn mở. PDF. js Express Viewer cho phép bạn hiển thị các tệp PDF bên trong một trang web bằng cách sử dụng JavaScript thay vì hỗ trợ PDF tích hợp của trình duyệt

Lợi ích của PDF. js Express Viewer so với kết xuất trình duyệt gốc là

  • Hỗ trợ Internet Explorer (ngoài tất cả các trình duyệt hiện đại)
  • Giao diện người dùng nhất quán và trải nghiệm người dùng trên các trình duyệt
  • Giao diện người dùng có thể tùy chỉnh hơn (ví dụ: xóa nút tải xuống)

PDF. js Express Viewer HTML Ví dụ

Đây là những gì chúng ta sẽ làm sau khi làm theo hướng dẫn này

Thêm PDF. js Express Viewer vào trang web của bạn là một quy trình 3 bước dễ dàng. Ở đây chúng tôi sẽ thực hiện tích hợp thủ công, tuy nhiên, chúng tôi có hướng dẫn tích hợp PDF. js Express Viewer với nhiều framework, bao gồm React, Angular, Vue, v.v. Bạn có thể tìm thấy danh sách đầy đủ các hướng dẫn về khung tại đây

Bước 1 - Tải xuống PDF. Trình xem nhanh js

Bạn có thể bấm vào đây để tải PDF. Trình xem nhanh js

Lưu ý rằng để sử dụng PDF. js Express Viewer, bạn sẽ cần một khóa cấp phép miễn phí. Vui lòng lấy khóa Trình xem miễn phí tại đây nếu bạn chưa có

  1. Di chuyển thư mục PDF.js Express Viewer đã giải nén vào thư mục dự án của bạn
  1. Sau khi bạn có các tệp, hãy tạo một trang web html mới trong cùng thư mục dự án. Gọi nó là index.html và dán cái này vào bên trong

Để nhập PDF. js Express Viewer dưới dạng mô-đun CommonJS, vui lòng tham khảo hướng dẫn này để tích hợp với NPM

Khi bạn đã hoàn thành việc này, một thư mục dự án ví dụ có thể trông giống như thế này

Trong thư mục mẫu này, bạn có thể thêm các thư mục. hình ảnh, tập lệnh và kiểu để bao gồm bất kỳ tài nguyên bổ sung nào bạn muốn có trên trang web của mình. Tuy nhiên, đối với dự án ví dụ này, chỉ cần có thư mục lib đã giải nén và tệp index.html mà chúng ta vừa tạo ở bước trên

  1. Để khởi tạo PDF. js Express Web Viewer, hãy thêm tập lệnh này vào body sau phần khai báo div viewer

Cách dễ nhất để chạy dự án này là với src0. Để làm như vậy, hãy chắc chắn rằng bạn có Node. js đã cài đặt

Tiếp theo, mở thiết bị đầu cuối của bạn và cài đặt src0 bằng lệnh sau

Sau khi cài đặt, điều hướng đến thư mục gốc của trang web của bạn trong thiết bị đầu cuối và chạy lệnh sau

Sau khi chạy lệnh đó, hãy truy cập trình duyệt của bạn và nhập localhost. 8080. Sau đó, bạn sẽ thấy như sau

Xem PDF dưới dạng HTML

Bước 3 - Sử dụng PDF. js Express Viewer API để tùy chỉnh trình xem

Để sử dụng thêm PDF. js Express API, bạn có thể thêm lệnh gọi API trong phần gọi lại của PDF. hàm tạo js Express. Ví dụ: để thay đổi chủ đề của PDF. js Express sang bóng tối, bạn có thể thêm

Làm mới trang ứng dụng của bạn (src2) và bạn sẽ thấy chủ đề đã thay đổi

Xem PDF dưới dạng HTML

Phần kết luận

Chúng tôi hy vọng điều này là hữu ích. Bạn cũng có thể xem phần mở rộng chức năng của PDF. js Express Viewer với chú thích PDF, điền biểu mẫu và ký bên trong ứng dụng web của bạn

Bạn có thể hiển thị PDF trong HTML không?

Sử dụng thẻ iframe là cách thứ hai để nhúng tệp pdf vào trang web HTML . Trong quá trình phát triển web, các nhà phát triển web sử dụng thẻ iframe để nhúng các tệp ở nhiều định dạng khác nhau và thậm chí các trang web khác trong một trang web. Do khả năng tương thích rộng rãi, thẻ iframe được sử dụng rộng rãi để nhúng pdf.

Làm cách nào để chuyển đổi PDF thành HTML?

Các bước chuyển PDF thành trang web. .
Mở tệp bạn muốn chuyển đổi trong trình chỉnh sửa PDF của mình
Chọn nút Tạo & Chỉnh sửa trên thanh công cụ bên phải
Nhấp vào Xuất PDF ở đầu cửa sổ
Chọn Trang web HTML và chọn các tùy chọn của bạn. .
Nhấp vào Xuất và chọn thư mục mà bạn muốn lưu trang mới của mình

Làm cách nào để hiển thị PDF trong HTML mà không cần tải xuống?

Google Drive .
Tải tệp PDF của bạn lên Google Drive. Nhấp vào "Mới" và sau đó chọn "Tải tệp lên"
Chia sẻ tài liệu. Nhấp chuột phải vào tài liệu và chọn "Chia sẻ"
Thay đổi cài đặt cho tài liệu. .
Tạo liên kết công khai cho tài liệu của bạn. .
Nhúng tài liệu của bạn vào iframe trên trang web của bạn. .
Bản xem trước của Google Drive nhúng PDF

Làm cách nào để hiển thị PDF trong iframe HTML?

Nhấp chuột phải vào liên kết trong thuộc tính href và nhấp vào Sao chép địa chỉ liên kết. Tạo khối nội dung Văn bản mới. Nhấp vào biểu tượng Nhúng phương tiện và nhúng mã HTML vào iframe trỏ đến URL PDF mà bạn đã lưu ý ở bước 3. Nhấp vào dấu kiểm để xem PDF được hiển thị trong khung nội tuyến mới được tạo