it-swarm.com.de

Wie man eine PDF-Datei in HTML anzeigt

Ich habe eine automatisch generierte PDF -Datei von itext und muss diese PDF -Datei in HTML anzeigen. Meine Frage ist: Wie kann ich eine lokale PDF -Datei in HTML mit pdf.js anzeigen? Sollte diese PDF Datei von einigen Standards generiert werden?

119
vivek

Die Implementierung einer PDF -Datei in Ihre HTML-Webseite ist sehr einfach.

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

Stellen Sie sicher, dass Sie die Breite und Höhe Ihren Bedürfnissen anpassen. Viel Glück!

180
Gofilord

Ich verwende den in Google Text & Tabellen einbettbaren PDF Viewer. Die Dokumente müssen nicht in Google Text & Tabellen hochgeladen werden, sie müssen jedoch online verfügbar sein.

<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>
35
Rahul Sinha

Wenn Sie pdf.js verwenden möchten, empfehle ich Ihnen, THIS zu lesen

Sie können Ihr PDF auch irgendwo hochladen (z. B. in Google Drive) und dessen URL in einem Iframe verwenden

oder

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

sie können einfach in einer HTML-Seite wie dieser anzeigen

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

In HTML-Seite für PC ist einfach zu implementieren

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

aber pdf in mobile anzeigen mit diesem code ist nicht möglich du brauchst ein plugin

wenn Sie nicht auf Ihre Website reagiert haben. Dann wird das obige Code-PDF nicht auf dem Handy angezeigt, aber Sie können die Download-Option nach dem Code einfügen

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

Portable Document Format ( PDF ).

  • Beliebiger Browser "Verwenden Sie _ Embeddable Google Document Viewer , um die PDF -Datei in iframe einzubetten.

    <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>
    
  • Nur für chrome Browser "Chrome PDF Viewer mit 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">
    

Beispiel 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's 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>
4
Yash

Der einfachste Weg ist zu benutzen,

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

und wenn es immer noch heruntergeladen angezeigt wird, überprüfen Sie den Serverantwortheader. Er sollte Content-Disposition:Inline und nicht Content-Disposition:Attachment haben.

4
Rohith Murali

Ich hatte vorher etwas Ähnliches und habe normalerweise Tags verwendet

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

aber es ist interessant, einige andere Möglichkeiten als oben herauszufinden!

4
DirWolf

Mit Javascript ist es möglich, eine PDF -Datei in HTML über die PDF.JS-Bibliothek von Mozilla anzuzeigen. Siehe hier für eine Demo .

Es gibt auch ein PDF Viewer-Javascript-Plugin zum Einbetten von PDF Dateien. Hier ist eine Demo . (Das Plugin ist nicht kostenlos)

2
Useful Angle