Tôi có một tệp PDF được tạo tự động bằng itext và tôi cần hiển thị tệp PDF đó bằng HTML. Câu hỏi của tôi là: Làm cách nào để hiển thị tệp PDF cục bộ trong HTML bằng pdf.js ? Tập tin PDF đó có nên được tạo bởi một số tiêu chuẩn không?
Câu trả lời:
Việc thực hiện tệp PDF trong trang web HTML của bạn rất dễ dàng.
<embed src="file_name.pdf" width="800px" height="2100px" />Hãy chắc chắn để thay đổi chiều rộng và chiều cao cho nhu cầu của bạn. Chúc may mắn!
<iframe src="file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>
Tôi sử dụng trình xem PDF có thể nhúng của 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.
<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>Nếu bạn muốn sử dụng pdf.js, tôi khuyên bạn nên đọc 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 là
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>bạn có thể hiển thị dễ dàng trong một trang html như thế này
<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf" height="700px" width="500">Trong trang html cho pc rất dễ thực hiện
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">nhưng pdf hiển thị trên thiết bị di động bằng mã này là không thể, bạn phải cần một plugin
nếu bạn không đáp ứng trang web của bạn. Sau đó, mã pdf không hiển thị trên thiết bị di động nhưng bạn có thể đặt tùy chọn tải xuống sau mã
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>Cách đơn giản nhất là sử dụng,
<iframe src="pdf-link">
</iframe>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ủ, nó nên có, Content-Disposition:Inlinevà không , Content-Disposition:Attachment.
1. Nhúng nội tuyến HTML gốc trình duyệt:
<embed
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></embed><iframe
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>Chuyên nghiệp:
Nhược điểm:
2. Trình xem Google Docs:
<iframe
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>Chuyên nghiệp:
Nhược điểm:
3. Các giải pháp khác để nhúng PDF:
LƯU Ý QUAN TRỌNG:
Vui lòng kiểm tra tiêu đề phản hồi HTTP X-Frame-Options. Nó nên là SAMEORIGIN.
X-Frame-Options SAMEORIGIN;Định dạng tài liệu di động ( PDF ).
Bất kỳ trình duyệt nào «Sử dụng _Embeddable Google Document Viewer để nhúng tệp PDF vào iframe.
<iframe src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0">
</iframe>Chỉ dành cho trình duyệt chrome «Trình xem Chrome PDF bằng plugin. pluginspage=http://www.adobe.com/products/acrobat/readstep2.html.
<embed type="application/pdf"
src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf"
width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"
background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21"
title="CHROME">Đoạn ví dụ:
<html>
<head></head>
<body style=" height: 100%;">
<div style=" position: relative;">
<div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">
<p>An
<a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception
</p>
<!-- To make div with scroll data [max-height: 500;]-->
<div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">
<img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />
<p>Streaming an Image form Response Stream (binary data) « This buffers the output in smaller chunks of data rather than sending the entire image as a single block.
<a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>
<p>Streaming an Image form Base64 String « embedding images directly into your HTML.
<a href="https://en.wikipedia.org/wiki/Data_URI_scheme">
<sup>Data URI scheme</sup>
</a>
<a href="https://codebeautify.org/image-to-base64-converter">
<sup>, Convert Your Image to Base64</sup>
</a>
<pre>data:[<media type>][;base64],<data></pre>
</p>
</div>
</div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<video style="height: 500px;width: 100%;" name="media" controls="controls">
<!-- autoplay -->
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
</video>
<p>Video courtesy of
<a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>.
</p>
<div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<p>Portable Document Format
<a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>.
</p>
<div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">
<embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
<p>Chrome PDF viewer
<a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">
<sup>extension</sup>
</a>
<a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">
<sup> (surfingkeys)</sup>
</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>
<p>Embeddable
<a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file:
<pre>
<iframe
src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
</pre>
</p>
</div>
</div>
</div>
</body>
</html>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 nhúng trong tài liệu HTML.
Điểm mấu chốt: ĐỐI TƯỢNG là tốt, EMBED là cũ. Bên cạnh các thẻ PARAM của IE, mọi nội dung giữa các thẻ OBRI sẽ được hiển thị nếu trình duyệt không hỗ trợ plugin được giới thiệu của OBOG và rõ ràng, nội dung được http yêu cầu 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
<!DOCTYPE html>
<html>
<body>
<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>Bạn có thể dùng
<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>Hoặc, nếu bạn muốn làm cho nó chiếm toàn bộ trang:
<a href="your_pdf_file_path>Link</a>