Cách hiển thị PDF trong HTML bằng JavaScript

Nói chung, một siêu liên kết được sử dụng để liên kết một tài liệu PDF để hiển thị trong trình duyệt. Liên kết neo HTML là cách dễ nhất để hiển thị tệp PDF. Nhưng nếu bạn muốn hiển thị tài liệu PDF trên trang web, tệp PDF cần được nhúng trong HTML. HTMLtag là tùy chọn tốt nhất để nhúng tài liệu PDF vào trang web. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách hiển thị tệp PDF trong trang web bằng cách sử dụng HTMLtag

Thẻ HTML định nghĩa vùng chứa để tải nội dung bên ngoài trong trang web. Các tham số sau có thể được chỉ định trong thẻ

• src – Chỉ định đường dẫn của tệp bên ngoài để nhúng
• loại – Chỉ định loại phương tiện của nội dung được nhúng
• chiều rộng – Chỉ định chiều rộng của nội dung được nhúng
• chiều cao – Chỉ định chiều cao của nội dung được nhúng

Nhúng tệp PDF vào HTML

Sử dụng đoạn mã sau để nhúng tệp PDF vào trang web HTML

Cấu hình xem tài liệu PDF

Bây giờ chúng tôi sẽ trình bày cách bạn có thể kiểm soát chế độ xem tài liệu PDF trên trang web. Sử dụng các tham số trong URL, bạn có thể chỉ định chính xác nội dung sẽ hiển thị và cách hiển thị tài liệu PDF.
Các tham số sau thường được sử dụng để nhúng tệp PDF vào HTML hoặc mở trong trình duyệt.

• page=pagenum – Chỉ định một số [số nguyên] của trang trong tài liệu. Trang đầu tiên của tài liệu có giá trị số trang là 1
• zoom=scale – Đặt hệ số thu phóng và cuộn, sử dụng giá trị float hoặc số nguyên. Ví dụ: giá trị tỷ lệ là 100 cho biết giá trị thu phóng là 100%
• view=Fit – Đặt chế độ xem của trang được hiển thị
• thanh cuộn = 1. 0 – Bật hoặc tắt thanh cuộn
• thanh công cụ = 1. 0 – Bật hoặc tắt thanh công cụ
• thanh trạng thái = 1. 0 – Bật hoặc tắt thanh trạng thái
• bảng điều hướng=1. 0 – Bật hoặc tắt ngăn điều hướng và tab

Chỉ định tham số trong URL

Bạn có thể chỉ định nhiều tham số trong URL. Mỗi tham số phải được phân tách bằng ký tự dấu và [&] hoặc dấu thăng [#]. Các thao tác được thực hiện từ trái sang phải và các thao tác sau sẽ ghi đè lên các thao tác trước đó

//example.com/doc.pdf#Chapter5
//example.com/doc.pdf#page=5
//example.com/doc.pdf#page=3&zoom=200,250,100
//example.com/doc.pdf#zoom=100
//example.com/doc.pdf#page=72&view=fitH,100

Tắt và Ẩn Thanh công cụ trong PDF Web Viewer

Ví dụ này cho biết cách ẩn hoặc xóa thanh công cụ, bảng điều hướng và thanh cuộn của tệp PDF được mở trong HTML bằng cách sử dụng các tham số trong URL

Sử dụng đoạn mã sau để nhúng tài liệu PDF vào trang web và xóa hoặc ẩn thanh công cụ của tệp PDF được nhúng

Chuyển đổi HTML sang PDF bằng JavaScript

Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc nâng cao chức năng của tập lệnh này không?

PDF của Mozilla. js là một dự án nguồn mở được cấp phép theo giấy phép Apache 2, vì vậy nó có thể được sử dụng trong hầu hết mọi ứng dụng

Thư viện về cơ bản chỉ cho phép chúng tôi tệp PDF trong trình duyệt

Nếu bạn xem chi tiết giao diện người dùng của trình duyệt, bạn sẽ thấy rằng nó giống như trong Mozilla Firefox, nếu bạn mở tệp PDF trong trình duyệt

Phiên bản demo của trình duyệt có sẵn tại liên kết này

Tuy nhiên, nếu bạn không cần tất cả các tính năng này trong ứng dụng của mình thì có tùy chọn sử dụng PDF. API js

Phần lớn trình duyệt web hỗ trợ hiển thị các tệp PDF nguyên bản mà không cần thư viện của bên thứ ba. Tuy nhiên, hành vi sẽ không phải lúc nào cũng nhất quán

Trước tiên, hãy xem một số cách bạn có thể hiển thị tệp PDF trong ứng dụng web của mình và sau đó giới thiệu kỹ thuật tốt nhất, PDF của Mozilla. js, trong ngữ cảnh của ứng dụng React

sử dụng

Sử dụng thẻ hoạt động trên tất cả các trình duyệt chính trên máy tính để bàn, nhưng không thành công trên thiết bị di động. Nếu điều đó vẫn phù hợp với nhu cầu của bạn, ở đây bạn đi

✅ Hoạt động tốt trên tất cả các trình duyệt máy tính để bàn chính

✅ Cung cấp cho bạn khả năng nhúng PDF vào cấu trúc tài liệu của riêng bạn [i. e. bạn có thể có các thành phần giao diện người dùng của riêng mình ở trên/dưới/bên cạnh tài liệu PDF]

❌ Lỗi trên tất cả các trình duyệt di động

Sử dụng Trình xem của Google Tài liệu

Nếu bạn tìm kiếm trên internet về “Cách hiển thị tệp PDF trong ứng dụng web”, bạn sẽ bắt gặp giải pháp kỳ lạ này. Về cơ bản, nó sử dụng API Google không có giấy tờ để hiển thị PDF ở dạng

Điều này có thể đã làm việc trong quá khứ, nhưng nó không còn nữa. Nói chính xác hơn, nó hoạt động, 50% thời gian. Những lần khác nó không thành công với một lỗi. meh. Thậm chí không thử phương pháp này nữa

Sử dụng một liên kết đơn giản

Đây là một lớp lót. Nó sử dụng thẻ HTML liên kết đến tài liệu PDF