Empfohlene Methode zum Einbetten von PDF in HTML?

Question

Welche Methode wird empfohlen, um PDF in HTML einzubetten?

• iFrame?
• Objekt?
• Einbetten?

Was sagt Adobe selbst dazu?

In meinem Fall wird die PDF-Datei im laufenden Betrieb generiert, so dass sie vor dem Flushen nicht in eine Drittanbieterlösung hochgeladen werden kann.

Answer 1

Schauen Sie sich diesen Code an - Um das PDF in HTML einzubetten

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

Answer 2

Konvertieren Sie es mit 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 bei der browserübergreifenden Anzeige von PDF-Dateien vermeiden wollen und wenn die PDF-Datei nur ein oder zwei Seiten umfasst. Natürlich muss ImageMagick (das wiederum Ghostscript benötigt) auf Ihrem Webserver installiert sein, eine Option, die in Shared-Hosting-Umgebungen möglicherweise nicht verfügbar ist. Es gibt auch ein PHP-Plugin (namens imagick), das funktioniert wie diese aber sie hat ihre eigenen speziellen Anforderungen.

Answer 3

Sie können die relative Position der gespeicherten PDF-Datei wie folgt verwenden:

Beispiel1

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

Answer 4

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

Zuerst haben wir PDF.jS ausprobiert. Es funktionierte mit Base64 im Viewer für Firefox und Chrome. Allerdings war es für unsere PDF-Datei inakzeptabel langsam. IE/Edge funktionierte überhaupt nicht.

Deshalb haben wir es mit einer Base64-Zeichenkette in einem HTML-Objekt-Tag versucht. Dies funktionierte wiederum nicht mit IE/Edge (vielleicht das gleiche Problem wie bei PDF.js). In Chrome/Firefox/Safari wiederum 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 Object-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 das PDF zwar korrekt angezeigt wird, Chrome stellt eine neue Anfrage an den Server, sobald Sie in der Vorschau auf "Download" klicken . Das erforderliche Hidden-Field pdfHelperTransferData (zum Senden unserer Formulardaten, die für die PDF-Erzeugung benötigt werden) ist nicht mehr gesetzt, da das PDF in einem IFrame angezeigt wird. Für diese Funktion/Fehler siehe Chrome sendet beim Herunterladen einer PDF-Datei zwei Anfragen (und bricht eine davon ab) .

Jetzt bleiben die Problemkinder IE9 und IE10. Für diese haben wir eine Vorschaulösung aufgegeben und senden das Dokument einfach durch Anklicken des Vorschau-Buttons als Download an den Benutzer (statt der Vorschau). Wir haben viel ausprobiert, aber selbst wenn wir eine Lösung gefunden hätten, hätte sich der Mehraufwand für diesen kleinen Teil der Nutzer nicht gelohnt. Unsere Lösung für den Download finden Sie hier: PDF-Download ohne Aktualisierung mit IFrame .

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>

Um den Browsertyp für IE/Edge zu überprüfen, siehe hier: Wie kann ich Internet Explorer (IE) und Microsoft Edge mit JavaScript erkennen? Ich hoffe, diese Erkenntnisse ersparen jemand anderem die Zeit.

Answer 5

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

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

2. Informieren Sie PDFObject welche PDF-Datei eingebettet werden soll und wo sie eingebettet werden soll

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

3. Sie können optional CSS verwenden, um die visuelle Gestaltung, einschließlich Abmessungen, Rahmen, Ränder usw., festzulegen.

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

Quelle: https://pdfobject.com/