Empfohlene Möglichkeit, PDF in HTML einzubetten?

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

• iFrame?
• Objekt?
• Einbetten?

Was sagt sich Adobe dazu?

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

Der wahrscheinlich beste Ansatz ist die Verwendung der PDF.JS- Bibliothek. Es ist ein reiner 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

Dies ist schnell, einfach und auf den Punkt gebracht 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 mithilfe des Google Drive PDF-Viewers umgehen

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

Zu diesem Zweck können Sie auch den Google PDF Viewer verwenden. Soweit ich weiß, handelt es sich nicht um eine offizielle Google-Funktion (irre ich mich?), Aber sie funktioniert für mich sehr gut und reibungslos. Sie müssen Ihr PDF vorher irgendwo hochladen und einfach die 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 kein Flash Player benötigt wird, sondern JavaScript verwendet wird.

Sie haben eine gewisse Kontrolle darüber, wie die PDF-Datei im Browser angezeigt wird, indem Sie einige Optionen in der Abfragezeichenfolge übergeben. Ich war mit dieser Arbeit zufrieden, bis mir klar wurde, dass sie in IE8 nicht funktioniert. :(

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

Ich habe jedoch noch keine älteren Versionen der oben genannten Browser getestet. Aber hier ist der Code, den ich trotzdem habe, falls er jemandem hilft. Dadurch wird der Zoom auf 85% eingestellt und Bildlaufleisten, Symbolleisten und Navigationsfenster werden entfernt. Ich werde meinen Beitrag aktualisieren, wenn ich auf etwas stoße, das auch im IE funktioniert.

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

Mit beiden <object>und <embed>geben Ihnen eine größere Breite der Browser - Kompatibilitä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>

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

<?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, Probleme mit der browserübergreifenden PDF-Anzeige vermeiden möchten und wenn die PDF-Datei nur ein oder zwei Seiten umfasst. Natürlich muss ImageMagick auf Ihrem Webserver installiert sein (was wiederum Ghostscript erfordert), eine Option, die in gemeinsam genutzten Hosting-Umgebungen möglicherweise nicht verfügbar ist. Es gibt auch eine PHP - Plugin (genannt imagick) , dass Werke wie diese , aber es hat seine eigene spezielle Anforderungen sind.

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

FDView kombiniert PDF2SWF (das selbst auf xpdf basiert ) mit einem SWF- Viewer, sodass Sie PDF-Dokumente im laufenden Betrieb auf Ihrem Server konvertieren und einbetten können.

xpdf ist kein perfekter PDF-Konverter. Wenn Sie bessere Ergebnisse benötigen, kann Ghostview PDF-Dokumente in andere Formate konvertieren, für die Sie möglicherweise einfacher einen Flash-Viewer erstellen können.

Für einfache PDF-Dokumente sollte FDView jedoch recht gut funktionieren.

Unser Problem ist, dass wir aus rechtlichen Gründen keine PDF-Dateien vorübergehend auf der Festplatte speichern dürfen . Außerdem sollte nicht die gesamte Seite neu geladen werden, wenn eine PDF-Datei als Vorschau im Browser angezeigt wird.

Zuerst haben wir PDF.jS ausprobiert. Es funktionierte mit Base64 im Viewer für Firefox und Chrome. Für unser PDF war es jedoch inakzeptabel langsam. IE / Edge hat überhaupt nicht funktioniert.

Wir haben es daher mit einer Base64-Zeichenfolge in einem HTML-Objekt-Tag versucht. Dies funktionierte wiederum nicht für IE / Edge (möglicherweise das gleiche Problem wie bei PDF.js). In Chrome / Firefox / Safari wieder kein Problem. Deshalb haben wir uns für eine Hybridlösung entschieden.IE / Edge verwenden wir einen IFrame und für alle anderen Browser das Objekt-Tag.

Die IFrame-Lösung würde natürlich auch für Chrome und Co. funktionieren. Der Grund, warum wir diese Lösung für Chrome nicht verwendet haben, ist, dass Chrome zwar korrekt angezeigt wird, Chrome jedoch eine neue Anfrage an den Server sendet, sobald Sie in der Vorschau auf "Herunterladen" klicken . Das erforderliche versteckten Feldern pdfHelperTransferData (zum Senden unserer für die PDF-Generierung erforderlichen Formulardaten) ist nicht mehr festgelegt, da das PDF in einem IFrame angezeigt wird. Für diese Funktion / diesen Fehler sieheChrome sendet beim Herunterladen einer PDF-Datei zwei Anfragen (und bricht eine davon ab) .

Jetzt bleiben die Problemkinder IE9 und IE10 bestehen. Für diese haben wir eine Vorschau-Lösung aufgegeben und das Dokument einfach durch Klicken auf die Vorschau-Schaltfläche als Download an den Benutzer (anstelle der Vorschau) gesendet. Wir haben viel versucht, aber selbst wenn wir eine Lösung gefunden hätten, wäre der zusätzliche Aufwand für diesen winzigen Teil der Benutzer den Aufwand nicht wert gewesen. Unsere Lösung für den Download finden Sie hier: Laden Sie PDF ohne Aktualisierung mit IFrame herunter .

Unser Javascript:

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

Unser HTML:

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

Informationen zum Überprüfen des Browsertyps für IE / Edge finden Sie hier: Wie kann ich Internet Explorer (IE) und Microsoft Edge mithilfe von JavaScript erkennen? Ich hoffe, dass diese Erkenntnisse jemand anderem die Zeit sparen.

Sie können den relativen Speicherort des gespeicherten PDF wie folgt verwenden:

Beispiel 1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

Beispiel2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

1. Erstellen Sie einen Container für Ihre PDF-Datei

   <div id="example1"></div>

2. Teilen Sie PDFObject mit, welches PDF eingebettet werden soll und wo es eingebettet werden soll

   <script src="/js/pdfobject.js"></script>
   <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

3. Optional können Sie CSS verwenden, um das visuelle Design festzulegen, einschließlich Bemaßungen, Rahmen, Ränder usw.

   <style>
   .pdfobject-container { height: 500px;}
   .pdfobject { border: 1px solid #666; }
   </style>

Quelle: https://pdfobject.com/

Scribd erfordert nicht mehr, dass Sie Ihre Dokumente auf ihrem Server hosten. Wenn Sie ein Konto bei ihnen erstellen, erhalten Sie eine Publisher-ID. Es sind nur wenige Zeilen JavaScript-Code erforderlich, um auf Ihrem eigenen Server gespeicherte PDF-Dateien zu laden.

Weitere Informationen finden Sie unter Entwicklertools .

<object width="400" height="400" data="helloworld.pdf"></object>

PdfToImageServlet mit ImageMagick'sconvert Befehl .

Anwendungsbeispiel: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

So habe ich es mit AXIOS und Vue.js gemacht:

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

füge urlPDF dynamisch zu HTML hinzu:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

Eine der Optionen, die Sie in Betracht ziehen sollten, ist Notable PDF.
Es gibt einen kostenlosen Plan, es sei denn, Sie planen eine Online-Zusammenarbeit in Echtzeit für PDFs

Betten Sie Folgendes iframein ein beliebiges HTML ein und genießen Sie die Ergebnisse:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

Informationen zum Streamen der Datei in den Browser finden Sie unter Frage zum Stapelüberlauf. So streamen Sie eine PDF-Datei mit .NET 2.0 als Binärdatei in den Browser Beachten Sie, dass dies mit geringfügigen Abweichungen funktionieren sollte, unabhängig davon, ob Sie eine Datei aus dem Dateisystem bereitstellen oder dynamisch generiert.

Vor diesem Hintergrund bietet der referenzierte MSDN-Artikel eine eher vereinfachte Ansicht der Welt. Daher möchten Sie möglicherweise auch erfolgreich einige PDF-Dateien über HTTPS in den Browser streamen, um einige der Header zu erhalten, die Sie möglicherweise bereitstellen müssen.

Mit diesem Ansatz ist ein Iframe wahrscheinlich der beste Weg. Lassen Sie ein Webformular die Datei streamen und platzieren Sie den Iframe auf einer anderen Seite, wobei das srcAttribut auf das erste Formular festgelegt ist.

1. Erstellen Sie einen Blob der eingegebenen PDF-Bytes
2. Verwenden Sie einen Iframe und PDF.js, die mit dieser browserübergreifenden Problemumgehung gepatcht wurden

Der URI für den Iframe sollte ungefähr so ​​aussehen:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

Jetzt zeigen FF, Chrome, IE 11 und Edge die PDF-Datei in einem Viewer im Iframe an, der über den Standard-Blob-URI in der URL übergeben wird.

Ich musste eine Vorschau eines PDF mit React anzeigen. Nachdem ich mehrere Bibliotheken ausprobiert hatte, bestand meine optimale Lösung darin, die Daten abzurufen und zu ebnen.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

Wenn Sie PDF.JS nicht alleine hosten möchten, können Sie DocDroid ausprobieren . Es ähnelt dem Google Drive PDF-Viewer, ermöglicht jedoch ein benutzerdefiniertes Branding.

Ich fand, dass dies gut funktioniert und der Browser es in Firefox handhabt. Ich habe IE nicht überprüft ...

<script>window.location='url'</script>