Frage Empfohlene Methode zum Einbetten von PDF in HTML?


Was ist die empfohlene Methode zum Einbetten von PDF in HTML?

  • iFrame?
  • Objekt?
  • Einbetten?

Was sagt Adobe dazu?

In meinem Fall wird das PDF im laufenden Betrieb erstellt, sodass es vor dem Leeren nicht in eine Drittanbieterlösung hochgeladen werden kann.


981
2017-11-14 23:55


Ursprung


Antworten:


Wahrscheinlich ist der beste Ansatz, das zu verwenden PDF.JS Bibliothek. Es ist ein reines HTML5/JavaScript Renderer für PDF-Dokumente ohne Plugins von Drittanbietern.

Online-Demo: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js


449
2017-11-15 00:01



Dies ist schnell, einfach, auf den Punkt und erfordert kein Skript von Drittanbietern:

<embed src="http://example.com/the.pdf" width="500" height="375" type='application/pdf'>

UPDATE (1/2018):

Der Chrome-Browser unter Android unterstützt keine PDF-Einbettungen mehr. Sie können dies umgehen, indem Sie den Google Drive PDF-Viewer verwenden

<embed src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

404
2017-08-12 17:29



Zu diesem Zweck können Sie auch Google PDF Viewer verwenden. Soweit ich weiß, handelt es sich nicht um ein offizielles Google-Feature (irre ich mich damit?), Aber es funktioniert für mich sehr nett und reibungslos. Sie müssen Ihr PDF irgendwo vorher hochladen und einfach seine URL verwenden:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

Wichtig ist, dass es keinen Flash-Player benötigt, es verwendet JavaScript.


326
2018-03-10 13:38



Sie haben eine gewisse Kontrolle darüber, wie die PDF im Browser angezeigt wird, indem Sie einige Optionen in der Abfragezeichenfolge übergeben. Ich war glücklich mit dieser Arbeit, bis ich merkte, dass es in IE8 nicht funktioniert. :(

Es funktioniert in Chrome 9 und Firefox 3.6, aber in IE8 zeigt es die Meldung "Fügen Sie hier Ihre Fehlermeldung ein, wenn das PDF nicht angezeigt werden kann."

Ich habe jedoch noch keine älteren Versionen eines der oben genannten Browser getestet. Aber hier ist der Code, den ich sowieso habe, falls es jemandem hilft. Dies setzt den Zoom auf 85%, entfernt Bildlaufleisten, Symbolleisten und Navigationsbereiche. Ich werde meinen Beitrag aktualisieren, wenn ich auf etwas stoße, das auch im IE funktioniert.

<div id="pdf">
  <object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
  </object>
</div>

82
2018-03-02 18:36



Mit beiden <object> und <embed> gibt Ihnen eine breitere Browserkompatibilität.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

45
2018-05-15 14:36



Konvertieren Sie es über ImageMagick in PNG und zeigen Sie das PNG (schnell und schmutzig) an.

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

Dies ist eine gute Option, wenn Sie eine schnelle Lösung benötigen, browserübergreifende PDF-Anzeigeprobleme vermeiden möchten und die PDF-Datei nur aus ein oder zwei Seiten besteht. Natürlich muss ImageMagick auf Ihrem Webserver installiert sein (was wiederum Ghostscript benötigt), eine Option, die in Shared Hosting-Umgebungen möglicherweise nicht verfügbar ist. Es gibt auch ein PHP-Plugin (imagick), das funktioniert so was aber es hat seine eigenen speziellen Anforderungen.


19
2017-12-06 18:17



Halten Sie Ausschau nach diesem Code, um das PDF in HTML einzubetten

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

13
2017-11-15 23:11



FDView kombiniert PDF2SWF (die selbst basiert auf xpdf) mit einem SWF Viewer, damit Sie PDF-Dokumente direkt auf Ihrem Server konvertieren und einbetten können.

xpdf ist kein perfekter PDF-Konverter. Wenn Sie dann bessere Ergebnisse benötigen Geisterblick hat einige Möglichkeiten, PDF-Dokumente in andere Formate zu konvertieren, für die Sie leichter einen Flash-Viewer erstellen können.

Aber für einfache PDF-Dokumente sollte FDView einigermaßen gut funktionieren.


12
2017-11-15 23:50



Scribd erfordert nicht länger, dass Sie Ihre Dokumente auf ihrem Server hosten. Wenn Sie ein Konto erstellen, erhalten Sie eine Publisher-ID. Es dauert nur ein paar Zeilen JavaScript-Code, um PDF-Dateien auf Ihrem eigenen Server zu laden.

Für weitere Details, siehe Entwicklerwerkzeuge.


7
2017-08-19 00:30