Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

Tôi có một tệp PDF được tạo tự động bởi ITEXT và tôi cần hiển thị tệp PDF đó trong HTML. Câu hỏi của tôi là: Làm thế nào để hiển thị tệp PDF cục bộ trong HTML bằng pdf.js? Tệp PDF đó có nên được tạo bởi một số tiêu chuẩn?itext and I need to display that PDF file in HTML. My question is: How to display a local PDF file in HTML using pdf.js? Should that PDF file be generated by some standards?

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

Luke Girvin

Huy hiệu vàng 13K862 Huy hiệu bạc83 Huy hiệu đồng8 gold badges62 silver badges83 bronze badges

Đã hỏi ngày 22 tháng 7 năm 2013 lúc 9:29Jul 22, 2013 at 9:29

2

Việc triển khai tệp PDF trong trang web HTML của bạn rất dễ dàng.


Đảm bảo thay đổi chiều rộng và chiều cao cho nhu cầu của bạn. Chúc may mắn!

Đã trả lời ngày 21 tháng 3 năm 2014 lúc 21:31Mar 21, 2014 at 21:31

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

GofilordgofilordGofilord

5.9393 huy hiệu vàng25 Huy hiệu bạc43 Huy hiệu đồng3 gold badges25 silver badges43 bronze badges

10

Tôi sử dụng Trình xem PDF có thể nhúng Google Docs. Các tài liệu không phải được tải lên Google Docs, nhưng chúng phải có sẵn trực tuyến.


Jerabekjakub

5.1014 Huy hiệu vàng24 Huy hiệu bạc32 Huy hiệu Đồng4 gold badges24 silver badges32 bronze badges

Đã trả lời ngày 3 tháng 7 năm 2016 lúc 17:55Jul 3, 2016 at 17:55

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

Rahul Sinharahul SinhaRahul Sinha

1.85113 Huy hiệu bạc17 Huy hiệu đồng13 silver badges17 bronze badges

7

1. Nhúng HTML nội tuyến-bản địa của trình duyệt:



Pro:

  • Không có giới hạn kích thước tệp PDF (thậm chí hàng trăm MB)
  • Nó là giải pháp nhanh nhất

Cons:

  • Nó không hoạt động trên các trình duyệt di động

2. Trình xem Google Docs:


Pro:

  • Hoạt động trên trình duyệt máy tính để bàn và di động

Cons:

  • Giới hạn tệp 25MB
  • Yêu cầu thêm thời gian để tải xuống trình xem

3. Các giải pháp khác để nhúng PDF:

  • https://mozilla.github.io/pdf.js
  • https://pdfobject.com
  • https://viewerjs.org

LƯU Ý QUAN TRỌNG:

Vui lòng kiểm tra tiêu đề phản hồi HTTP tùy chọn X-frame. Nó nên là Sameorigin.

X-Frame-Options SAMEORIGIN;

Đã trả lời ngày 5 tháng 3 năm 2020 lúc 7:03Mar 5, 2020 at 7:03

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

UkrukrUkr

2.10116 Huy hiệu bạc16 Huy hiệu đồng16 silver badges16 bronze badges

0

Nếu bạn muốn sử dụng pdf.js, tôi khuyên bạn nên đọc cái này

Bạn cũng có thể tải lên PDF của mình ở đâu đó (như Google Drive) và sử dụng URL của nó trong IFRAME

hoặc


test.pdf

Đã trả lời ngày 24 tháng 7 năm 2013 lúc 16:19Jul 24, 2013 at 16:19

Bạn có thể hiển thị dễ dàng trong một trang HTML như thế này

Đã trả lời ngày 14 tháng 9 năm 2017 lúc 9:06Sep 14, 2017 at 9:06

Harun Ugurharun Ugurharun ugur

1.58616 Huy hiệu bạc17 Huy hiệu đồng16 silver badges17 bronze badges

Trong trang HTML cho PC rất dễ thực hiện


Nhưng pdf hiển thị trong điện thoại di động bởi mã này là không thể, bạn phải cần một plugin

Nếu bạn không phản hồi lại trang web của bạn. Sau đó, mã trên PDF không hiển thị trong điện thoại di động nhưng bạn có thể đặt tùy chọn tải xuống sau mã


download

marc_s

716K172 Huy hiệu vàng1317 Huy hiệu bạc1435 Huy hiệu Đồng172 gold badges1317 silver badges1435 bronze badges

Đã trả lời ngày 29 tháng 6 năm 2017 lúc 5:01Jun 29, 2017 at 5:01

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

Pradip Korpradip Korpradip kor

4594 Huy hiệu bạc8 Huy hiệu Đồng4 silver badges8 bronze badges

1

Định dạng tài liệu di động (PDF).PDF).

  • Bất kỳ trình duyệt nào «Sử dụng trình xem tài liệu Google có thể sử dụng được để nhúng tệp PDF trong

    
    
    4.

    
    
    0
  • Chỉ dành cho trình duyệt Chrome «Trình xem pdf Chrome sử dụng plugin.

    
    
    5.

    
    
    1

Ví dụ Sippet:


2

Đã trả lời ngày 5 tháng 2 năm 2018 lúc 10:34Feb 5, 2018 at 10:34

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

YashyashYash

8.7982 Huy hiệu vàng67 Huy hiệu bạc72 Huy hiệu đồng2 gold badges67 silver badges72 bronze badges

Cách đơn giản nhất là sử dụng,simplest way is to use,


3

Và nếu nó vẫn được tải xuống thay vì xem, hãy kiểm tra tiêu đề phản hồi của máy chủ, thì nó sẽ có,


6 và không,

7.downloaded instead of viewing, check the server response header, it should have,

6 and not,

7.

Đã trả lời ngày 4 tháng 10 năm 2018 lúc 10:54Oct 4, 2018 at 10:54

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

Rohith Muralirohith MuraliRohith Murali

5.3732 Huy hiệu vàng24 Huy hiệu bạc25 Huy hiệu Đồng2 gold badges24 silver badges25 bronze badges

0

Phần tử được hỗ trợ bởi tất cả các trình duyệt và xác định một đối tượng được nhúng trong tài liệu HTML.

Điểm mấu chốt: Đối tượng là tốt, nhúng là cũ. Bên cạnh các thẻ PARAM của IE, bất kỳ nội dung nào giữa các thẻ đối tượng sẽ được hiển thị nếu trình duyệt không hỗ trợ plugin được giới thiệu của đối tượng và rõ ràng, nội dung được yêu cầu HTTP bất kể nó có được hiển thị hay không. Tài liệu tham khảo

Mã làm việc: https://www.w3schools.com/code/tryit.asp?filename=g7l8bk6xc0a6


4

Đã trả lời ngày 2 tháng 9 năm 2019 lúc 7:22Sep 2, 2019 at 7:22

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

Tôi đã có một cái gì đó tương tự trước đây và đã sử dụng các thẻ thường


5

Nhưng thật thú vị khi tìm ra một số cách khác như trên!

Đã trả lời ngày 26 tháng 7 năm 2018 lúc 15:34Jul 26, 2018 at 15:34

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

DirwolfdirwolfDirWolf

8346 Huy hiệu bạc22 Huy hiệu Đồng6 silver badges22 bronze badges

Ngoài ra phương pháp này rất hữu ích:

Hiển thị tệp PDF trên trình duyệt máy tính để bàn và di động:desktop and mobile browsers:


6

Đã trả lời ngày 27 tháng 8 năm 2021 lúc 7:55Aug 27, 2021 at 7:55

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

MorimoriMori

1.56011 Huy hiệu bạc17 Huy hiệu đồng11 silver badges17 bronze badges

Cập nhật - API nhúng Adobe PDF

Adobe đã phát hành API nhúng Adobe PDF hoàn toàn miễn phí. Vì họ đã tạo ra định dạng PDF, API của họ có lẽ là tốt nhất cho việc này.

  • Nó cung cấp kết xuất PDF chất lượng cao nhất có sẵn.
  • Bạn có thể hoàn toàn tùy chỉnh trải nghiệm người dùng và chọn cách hiển thị PDF.
  • Bạn cũng sẽ có phân tích về việc sử dụng PDF để bạn có thể hiểu cách người dùng tương tác với PDF, bao gồm thời gian dành cho một trang và tìm kiếm.

Tất cả bạn phải làm là tạo một


8 và sử dụng nó trong đoạn mã.

Hiển thị PDF dưới dạng bộ đệm (ví dụ: tệp cục bộ)

Dưới đây là ví dụ về đoạn mã mà bạn có thể thêm vào HTML của mình và tận dụng API của họ để hiển thị PDF nếu bạn có bộ đệm (ví dụ: tệp cục bộ).


7

Đã trả lời ngày 17 tháng 1 lúc 11:44Jan 17 at 11:44

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

NenadnenadNeNaD

13.6K7 Huy hiệu vàng30 Huy hiệu bạc77 Huy hiệu đồng7 gold badges30 silver badges77 bronze badges

Bạn có thể dùng


8

Hoặc, nếu bạn muốn làm cho nó chiếm toàn bộ trang:


9

Ivan86

5.6572 Huy hiệu vàng13 Huy hiệu bạc 30 Huy hiệu Đồng2 gold badges13 silver badges30 bronze badges

Đã trả lời ngày 3 tháng 4 năm 2020 lúc 4:26Apr 3, 2020 at 4:26

Tôi hiểu bạn muốn hiển thị bằng HTML nhưng bạn cũng có thể mở tệp PDF bằng PHP bằng cách chỉ ra đường dẫn và trình duyệt sẽ hiển thị nó trong một vài bước đơn giản


0

Đã trả lời ngày 26 tháng 1 năm 2021 lúc 9:53Jan 26, 2021 at 9:53

Hướng dẫn how do you display a file in html? - làm thế nào để bạn hiển thị một tập tin trong html?

Câu trả lời được cung cấp bởi GoFilord là đúng nhưng tôi cũng có thể nói thêm rằng nếu bạn tạo một thùng trống để đổ pdf của bạn vào bạn nên cho nó một src = "" Giống như ...


1

... trong HTML và trong JavaScript ...


2

... nó sẽ hoạt động.Nếu thay vào đó bạn làm điều này ...


3

...nó sẽ không làm việc.

Đã trả lời ngày 17 tháng 6 lúc 18:11Jun 17 at 18:11