Làm cách nào để hiển thị pdf trong trình duyệt web trên trang .html?
Câu trả lời:
Tôi sử dụng trình xem PDF có thể nhúng của Google Tài liệu. Các tài liệu không cần phải được tải lên Google Docs, nhưng chúng phải có sẵn trực tuyến.
<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
thay vì sử dụng iframe và phụ thuộc vào bên thứ ba. Hãy nghĩ đến việc sử dụng flexpaper hoặc pdf.js.
Tôi đã sử dụng PDF.js , nó hoạt động tốt đối với tôi. Đây là bản demo .
ưu tiên sử dụng thẻ đối tượng
<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'
type='application/pdf'
width='100%'
height='700px'>
lưu ý rằng bạn có thể thay đổi chiều rộng và chiều cao thành bất kỳ giá trị nào mà bạn vui lòng truy cập http://www.w3schools.com/tags/tag_object.asp
Cách đơn giản nhất là tạo iframe và đặt nguồn thành URL của PDF.
(những nhà thiết kế HTML điên rồ) Tôi đã tự mình thực hiện nó, hoạt động tốt, trình duyệt chéo (thu thập thông tin vào boongke).
Plugin của trình duyệt kiểm soát các cài đặt đó, vì vậy bạn không thể ép buộc. Tuy nhiên, bạn có thể làm một cách đơn giản <a href="whatver.pdf">thay vì <a href="whatever.pdf" target="_blank">.
Miễn là bạn lưu trữ tệp PDF, thuộc tính đích là con đường để thực hiện. Nói cách khác, đối với các tệp tương đối, sử dụng thuộc tính target với giá trị _blank sẽ hoạt động tốt.
<e>
<a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>
Đối với đường dẫn tuyệt đối động cơ sẽ đi đến U nified R esource L ocator và mở nó họ. Vì vậy, hãy loại bỏ thuộc tính mục tiêu.
<e>
<a alt="StackExchange Handbook" title="StackExchange Handbook"
href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>
Trong cả hai trường hợp, trình duyệt sẽ hoạt động hiệu quả.
Bạn cũng có thể nhúng bằng JavaScript thông qua giải pháp của bên thứ ba như PDFObject .
Bạn có thể sử dụng mã này:
<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
Hoặc sử dụng trình xem PDF có thể nhúng của Google Tài liệu:
<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
Bạn cũng có thể có phương pháp GoogleDoc đơn giản này.
<a style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>
Điều này sẽ tạo ra một trang mới để bạn xem tài liệu mà không làm sai lệch luồng của bạn.
Giải pháp đơn giản là đặt nó trong iframe và hy vọng rằng người dùng có một trình cắm hỗ trợ nó.
(Tôi không biết, plugin Acrobat là một nguồn tài nguyên và nguồn gây mất ổn định đến mức tôi nên xóa nó khỏi bất kỳ trình duyệt nào mà nó chạm vào).
Giải pháp phức tạp, nhưng tương đối phổ biến là hiển thị nó trong một applet flash.
Chúng tôi kết xuất các trang tệp PDF dưới dạng tệp PNG trên máy chủ bằng JPedal (một thư viện java). Điều đó, kết hợp với một số javascript, cho phép chúng tôi kiểm soát cao đối với việc hiển thị và điều hướng.
Gần đây, tôi cần cung cấp phiên bản tài liệu .pdf thân thiện với thiết bị di động hơn, đáp ứng vì màn hình điện thoại hẹp yêu cầu phải cuộn sang phải và sang trái rất nhiều. Để chỉ cho phép cuộn dọc và tránh cuộn ngang, tôi thực hiện các bước sau:
Kết quả trông tốt và có thể sử dụng được trong cả môi trường máy tính để bàn và thiết bị di động.
Hiển thị nội dung được lưu ở định dạng tệp PDF / DOC / DOCX là lý tưởng để hiển thị tệp pdf / doc / docx trên trang web của bạn
Bạn đã thử sử dụng thẻ img đơn giản chưa?
<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">