Làm cách nào để nhúng một trình xem PDF vào một trang?

Nếu tôi không nhầm, Google Tài liệu cung cấp phương tiện để hiển thị tệp PDF được lưu trữ trên cùng một máy chủ với trang web thông qua một <iframe>, nhưng tôi cần biết cách tôi có thể thực hiện việc này theo cách tuân thủ nhiều trình duyệt.

Bạn có thể cân nhắc sử dụng PDFObject của Philip Hutchison.

Ngoài ra, nếu bạn đang tìm kiếm một giải pháp không phải Javascript, bạn có thể sử dụng đánh dấu như sau:

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>

PDF.js là một thử nghiệm công nghệ HTML5 khám phá việc xây dựng một trình kết xuất Định dạng Tài liệu Di động (PDF) trung thực và hiệu quả mà không cần hỗ trợ mã gốc. Nó hướng tới cộng đồng và được hỗ trợ bởi Mozilla Labs.

Bạn có thể xem bản demo tại đây .

Cách này có thể hoạt động tốt hơn một chút

<embed src= "MyHome.pdf" width= "500" height= "375">

Nếu tôi không nhầm, OP đang hỏi (mặc dù sau đó đã chấp nhận giải pháp .js) liệu máy chủ hiển thị PDF được nhúng của Google có hiển thị PDF trên trang web của riêng anh ấy hay không.

Vì vậy, một năm rưỡi sau: vâng, nó sẽ.

Xem http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html . Ngoài ra, hãy xem https://docs.google.com/viewer và cắm URL của tệp bạn muốn hiển thị.

Chỉnh sửa: Đang đọc lại, OP đã yêu cầu các giải pháp không sử dụng iFrames. Tôi không nghĩ điều đó có thể xảy ra với trình xem của Google.

hãy thử với Giấy Flex http://flexpaper.devaldi.com/

nó hoạt động như nguệch ngoạc

Đảm bảo thử nghiệm bất kỳ giải pháp nào trên các tùy chọn Reader khác nhau. Khách truy cập trang web có thể đặt trình duyệt của họ để mở PDF trong Reader / Acrobat chứ không phải trình duyệt, ví dụ: bằng cách tắt plugin Acrobat trong Firefox.

Tôi không thể chắc chắn về kết quả của mình, vì tôi có hai plugin Acrobat khác nhau mà Firefox nhận ra do tôi có các phiên bản khác nhau của Adobe Acrobat và Adobe Reader, nhưng có vẻ như bạn cần phải kiểm tra xem điều gì xảy ra nếu một người truy cập trang web đã đặt trình duyệt của họ để không mở PDF trong trình duyệt. Có thể khá khó chịu khi họ nhìn vào những gì có vẻ là một trang web có thể sử dụng khác và trình duyệt của họ đang cố gắng mở một tệp PDF mà họ nghĩ rằng họ không yêu cầu. Trong một số trường hợp, tệp PDF được mở tự động trong Adobe Reader chứ không phải trình duyệt và trong các trường hợp khác, trình duyệt sẽ xuất hiện hộp thoại thông báo tệp không tồn tại.

Tôi đã gặp phải sự không khớp như vậy với iframe và đối tượng cả hai, các vấn đề khác nhau đối với mã khác nhau.

Đây là mã HTML đơn giản. Tôi chưa thử các khuôn khổ được đề xuất.

Tôi thực sự sẽ chọn FlowPaper, đặc biệt là chế độ Elements mới của họ có thể được tìm thấy tại đây: https://flowpaper.com/demo/

Nó làm phẳng đáng kể các tệp PDF đồng thời giữ cho văn bản sắc nét, có nghĩa là nó sẽ tải nhanh hơn nhiều trên thiết bị di động

bằng cách sử dụng bootstrap, bạn có thể có tệp nhúng đầu tiên đáp ứng và di động.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

pdf2htmlEX của coolwanglu có lẽ là giải pháp tốt nhất hiện có để chuyển đổi tệp pdf thành html. Bạn có thể thực hiện một chuyển đổi đơn giản và sau đó nhúng trang html dưới dạng iframe hoặc một cái gì đó tương tự.