Cách xem file pdf trong html

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ẽ chỉ cho bạn cách 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 dùng để nhúng tệp PDF vào HTML hoặc mở trên 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 đó

http://example.com/doc.pdf#Chapter5
http://example.com/doc.pdf#page=5
http://example.com/doc.pdf#page=3&zoom=200,250,100
http://example.com/doc.pdf#zoom=100
http://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?

Trong bài viết này, chúng ta sẽ tìm hiểu cách nhúng tệp PDF vào tài liệu HTML, cùng với việc biết cách triển khai chúng thông qua các ví dụ. Đôi khi, bạn có thể muốn chèn tệp PDF vào tài liệu hoặc mã HTML để làm cho nội dung tương tác hơn. Bởi vì các định dạng rất khác nhau, không dễ để hoàn thành nhiệm vụ.  

Để học cách thêm file PDF vào code HTML, bạn cần biết cách convert file bằng phần mềm PDF, đây là kiến ​​thức tiên quyết. Bố cục tĩnh của PDF khiến nó không tương thích với thiết kế đáp ứng của HTML. Để chèn PDF vào HTML, trước tiên chúng ta phải chuyển đổi tệp. Một cách khác là nhúng mã PDF HTML vào một trang web để làm cho nó tương tác. Các phương pháp nhúng sau đây có thể được sử dụng để thêm PDF vào tệp HTML

  • Sử dụng thẻ đối tượng
  • Sử dụng iframe
  • Sử dụng thẻ nhúng

Chúng tôi sẽ khám phá và hiểu chi tiết các phương pháp này thông qua việc triển khai chúng

Phương pháp 1. Sử dụng thẻ đối tượng

Thẻ đối tượng HTML là cách đầu tiên để nhúng tệp PDF. Trong ví dụ dưới đây, tệp pdf sẽ được hiển thị trên một trang web, là một đối tượng

Ngoài việc nhúng tệp pdf vào trang web, thẻ đối tượng có thể nhúng các ứng dụng ActiveX, Flash, video, âm thanh và Java. Các tài liệu tương tác có thể được đính kèm vào một đối tượng được nhúng bằng thẻ HTML. Nó có thể được hiển thị theo nhu cầu của bạn trên màn hình bằng cách sử dụng các thuộc tính chiều cao và chiều rộng của đối tượng

ví dụ 1. Ví dụ này mô tả việc nhúng tệp PDF vào HTML bằng cách sử dụng Thẻ đối tượng

HTML




<!DOCTYPE html>

<html>

 

<head>

    <<0_______6_______1<0>

<4head>

 

<<9_______8_______

    <html3>

html5<html7 html8html9>0>1html7>

html5<___>6>7>6>

html5<___ 2  3html9

 5

 6 7html9 9

 6<1_______7_______9<3<4

html5<4_______9_______2>

    <4html3>

<4<9>

 

<4html>

đầu ra

Cách xem file pdf trong html

Sử dụng thẻ đối tượng

Phương pháp 2. Sử dụng iframe

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. Trình duyệt không hỗ trợ tài liệu PDF hoặc thẻ đối tượng cũng có thể sử dụng thẻ này để nhúng mã HTML pdf

ví dụ 2. Ví dụ này mô tả việc nhúng tệp PDF vào HTML bằng iframe

HTML




<!DOCTYPE html>

<html>

 

<head>

    <<0_______6_______1<0>

<4head>

 

<<9_______8_______

    <html3>

html5<html7 html8html9>0>1html7>

html5<___>6<07>6>

html5<<12 <13html9

 5

 6 7html9 9

 6<1_______7_______9<3>

html5<4_______6_______12>

    <4html3>

<4<9>

<4html>

đầu ra

Cách xem file pdf trong html

Sử dụng thẻ Iframe

Phương pháp 3. Sử dụng thẻ nhúng

Khi nhúng mã HTML pdf vào trang web, thẻ nhúng không được sử dụng thường xuyên như các thẻ trước đó vì nếu trình duyệt của người dùng không thể xử lý tệp PDF, màn hình sẽ trống. Phương pháp nhúng mã HTML pdf được sử dụng khi không cần cung cấp nội dung dự phòng

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 để nhúng PDF vào HTML?

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 để hiển thị PDF trong HTML bằng Javascript?

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. .
Bước 2 - Tích hợp PDF. js Express vào ứng dụng của bạn. Di chuyển tệp PDF đã trích xuất. .
Bước 3 - Sử dụng PDF. js Express Viewer API để tùy chỉnh trình xem

Làm cách nào để mở tệp PDF trong iframe trong 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