Wie zeige ich eine PDF-Datei in HTML an?

155

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

html  pdf 
— vivek
quelle
1
Mögliches Duplikat von PDF anzeigen im Webbrowser
— Rizvan

Antworten:

230

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 an Ihre Bedürfnisse anpassen. Viel Glück!

— Gofilord
quelle
Tolle Lösung, einfach.
— AugustoL
5
<iframe src="file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>
— αsααc t ի ε βöss
Das <embed>Tag ist neu in HTML5, sehr praktisch. siehe hier Link
— Belter
2
Der beste Weg ist beschrieben unter jsgyan.blogspot.in/2017/12/…
— Suman Bogati
1
Es zeigt, dass das Plugin auf Mobilgeräten im Chrome-Browser nicht unterstützt wird.
— JWC
50

Ich verwende den in Google Text & Tabellen einbettbaren PDF-Viewer. Die Dokumente müssen nicht in Google Text & Tabellen hochgeladen werden, sondern müssen 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>
— Rahul Sinha
quelle
1
Hier ist der Link: Einbettbare Google
— Text
Sie müssen iframe zusammen mit Google Docs Viewer verwenden, da sonst abhängig von Ihrem Hosting möglicherweise die Meldung "Fehler von der Anwendungsfirewall erkannt" angezeigt wird.
— user890332
1
Beachten Sie, dass diese Methode nur PDFs bis zu 25
— MB
2
Nur ein weiterer Kommentar, wenn Sie eine PDF-Datei in das Google-Laufwerk einbetten möchten. Nachdem Sie in das PDF geklickt haben und "Element einbetten" gefunden haben, wird der Iframe-HTML-Code generiert.
— Daisy Qin
Es muss nicht unbedingt online sein, Sie können es lokal in Ihrem Vermögen speichern und darauf verweisen
— Manzur Khan
24

Wenn Sie Gebrauch Pdf.js wollen, empfehle ich Ihnen zu lesen THIS

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>
— Gemeinschaft
quelle
15

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">
Erweitern Sie das Snippet

— harun ugur
quelle
11

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

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

Aber PDF-Show in Mobile durch diesen Code ist nicht möglich. Sie müssen ein Plugin benötigen

Wenn Sie auf Ihre Website nicht reagiert haben. Dann oben Code Code nicht in Handy angezeigt, aber Sie können Download-Option nach dem Code setzen

<embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
— pradip kor
quelle
Auf Chrome ist es ok aber auf IE funktioniert das nicht. Wie kann man auf IE
— Hong Van Vit
7

Der einfachste Weg ist zu verwenden,

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

und wenn es immer noch heruntergeladen wird, anstatt es anzuzeigen, überprüfen Sie den Server-Antwortheader, den es haben sollte Content-Disposition:Inlineund nicht Content-Disposition:Attachment.

— Rohith Murali
quelle
6

Portable Document Format ( PDF ).

  • Beliebiger Browser «Verwenden Sie _Embeddable Google Document Viewer , um die PDF-Datei einzubetten 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>

  • 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>
Erweitern Sie das Snippet

— Yash
quelle
6

1. Browser-native HTML-Inline-Einbettung:

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

Profi:

  • Keine Einschränkungen der PDF-Dateigröße (sogar Hunderte von MB)
  • Es ist die schnellste Lösung

Nachteile:

  • Es funktioniert nicht in mobilen Browsern

2. Google Text & Tabellen-Viewer:

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

Profi:

  • Funktioniert auf Desktop- und mobilen Browsern

Nachteile:

  • 25 MB Dateilimit
  • Benötigt zusätzliche Zeit zum Herunterladen des Viewers

3. Andere Lösungen zum Einbetten von PDF:

WICHTIGE NOTIZ:

Bitte überprüfen Sie den HTTP-Antwortheader von X-Frame-Options. Es sollte SAMEORIGIN sein.

X-Frame-Options SAMEORIGIN;
— Ukr
quelle
5

Ich hatte schon einmal 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 Wege wie oben herauszufinden!

— DirWolf
quelle
2

Das Element wird von allen Browsern unterstützt und definiert ein eingebettetes Objekt in einem HTML-Dokument.

Fazit: OBJEKT ist gut, EMBED ist alt. Neben den PARAM-Tags des IE wird jeglicher Inhalt zwischen OBJECT-Tags gerendert, wenn der Browser das von OBJECT angegebene Plugin nicht unterstützt, und anscheinend wird der Inhalt http-angefordert, unabhängig davon, ob er gerendert wird oder nicht. Referenz

Arbeitscode: 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>
Erweitern Sie das Snippet

— Sufiyan Ansari
quelle
0

Sie können verwenden

<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>

Oder, wenn Sie möchten, dass es die ganze Seite einnimmt:

<a href="your_pdf_file_path>Link</a>
— aaron34weston
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.