Как отобразить pdf файл в HTML

У меня есть автоматически созданный PDF файл itext, и мне нужно отобразить этот файл PDF в HTML. Мой вопрос: как отобразить локальный файл PDF в HTML с помощью pdf.js? Должен ли файл PDF быть создан по некоторым стандартам?

Ответ 1

Реализация PDF файла на веб-странице HTML очень проста.

<embed src="file_name.pdf" width="800px" height="2100px" />

Обязательно измените ширину и высоту ваших потребностей. Удачи!

Ответ 2

Я использую Google Docs встраиваемый просмотрщик PDF. Документы не нужно загружать в Документы Google, но они должны быть доступны в Интернете.

<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>

Ответ 3

Если вы хотите использовать pdf.js, я предлагаю вам прочитать ЭТО

Вы также можете загрузить свой pdf файл (например, Google Диск) и использовать его URL-адрес в iframe

или

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>

Ответ 4

вы можете легко просмотреть на html-странице, например

<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf"   height="700px" width="500">

Ответ 5

В html-странице для ПК легко реализовать

<embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%">

но pdf показать на мобильном телефоне этот код невозможно, вам нужен плагин

если вы не реагируете на свой сайт. Затем выше код pdf не отображается на мобильном телефоне, но вы можете поместить опцию загрузки после кода

<embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>

Ответ 6

Формат переносимого документа (PDF).

Любой браузер "Используйте _Embeddable Google Document Viewer, чтобы встроить файл PDF в 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>

Только для браузера Chrome "Chrome PDF Viewer с помощью плагина. 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">

Пример Sippet:

<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:[&lt;media type&gt;][;base64],&lt;data&gt;</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 the code I used to embed the PDF file: 
<pre>
&lt;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"&gt;&lt;/iframe&gt;
</pre>
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Ответ 7

У меня было нечто подобное раньше, и я использовал обычные теги

<a href="path_of_your_pdf/your_pdf_file.pdf" tabindex="-1"><strong>click here</strong></a>

но интересно узнать некоторые другие способы, как указано выше!

Ответ 8

самый простой способ - это использовать,

<iframe src="pdf-link">
</iframe>

и если он по-прежнему загружается downloaded вместо просмотра, проверьте заголовок ответа сервера, он должен иметь Content-Disposition:Inline, а не Content-Disposition:Attachment.

Ответ 9

Используя Javascript, можно отображать PDF файл в формате HTML через библиотеку Mozilla PDF.JS. Смотрите здесь для демонстрации.

Существует также плагин PDF Viewer Javascript для встраивания файлов PDF. Вот демонстрация. (плагин не бесплатный)

Ответ 10

Элемент поддерживается всеми браузерами и определяет встроенный объект в HTML-документе.

Итог: OBJECT - это Good, EMBED - это Old. Помимо тегов IE PARAM, любой контент между тегами OBJECT будет отображаться, если браузер не поддерживает указанный плагин OBJECT, и, по-видимому, контент получает HTTP-запрос независимо от того, рендерится он или нет. Reference

Рабочий код: 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>