verlinken - pdf viewer html




Empfohlene Methode zum Einbetten von PDF in HTML? (12)

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

    <div id="example1"></div>
    
  2. Informieren Sie PDFObject, 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. Sie können optional CSS verwenden, um das visuelle Styling anzugeben, einschließlich Dimensionen, Rahmen, Ränder usw.

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

Quelle: https://pdfobject.com/

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.


Das Problem für uns ist, dass wir aus rechtlichen Gründen keine Daten speichern können. Also müssen wir mit Streams und ähnlichem arbeiten, ohne das PDF im Dateisystem zu speichern. Und aus verschiedenen Gründen sollte die Seite beim Herunterladen oder Anzeigen einer PDF-Datei nicht neu geladen werden.

Zuerst versuchten wir mit PDF.JS wegen des Vorschlags von @lubos hasko: Wir haben es geschafft, Base64 mit dem Viewer zu verwenden. Dies funktionierte in Firefox und Chrome. Aber es war sowieso sehr langsam. IE / Edge hat für uns überhaupt nicht funktioniert.

Die Anzeige eines PDF-Base64-Strings in einem Objekt-Tag funktionierte für uns im Microsoft-Browser (IE / Edge) nicht, aber sehr gut in Chrome / Firefox / Safari. Für IE11 / Edge verwendeten wir daher einen IFrame, um einen PDF-Stream anzuzeigen. Es funktioniert gut und der Wartungsaufwand hält sich in Grenzen. Für IE9 / IE10 senden wir die Datei einfach als Download-Stream, da es mit diesen Browsern in Kombination mit dem iframe nicht sehr gut funktioniert. Der Nutzer hat nicht den Luxus, das PDF in einer Modal-Box-Vorschau zu zeigen, was für die Menge unserer Kunden, die diese Browser benutzen, in Ordnung ist (ca. 1%). Sie können unsere Download-Lösung hier finden: Download PDF ohne Aktualisierung mit IFrame .

Der Grund, warum wir die IFrame-Lösung nicht für alle Browser verwenden, liegt darin, dass Chrome zwar in allen getesteten Browsern korrekt angezeigt wird, Chrome jedoch eine weitere Anforderung an die Serverfunktion stellt, sobald Sie die PDF-Datei in Chrome herunterladen möchten. PDF Reader. Das hidden-field pdfHelperTransferData wird nicht mehr festgelegt, da die PDF in einem IFrame angezeigt wird, daher ist der Parameter in der serverseitigen Funktion null . Für diesen "Feature / Bug" sehen Sie, dass Chrome beim Herunterladen einer PDF-Datei zwei Anfragen sendet (und eine davon abbricht) .

Unser Javascript

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 nach Microsoft-Browser zu suchen, siehe zum Beispiel: Wie kann ich Internet Explorer (IE) und Microsoft Edge mit JavaScript erkennen? Ich hoffe, dass diese Ergebnisse jemand anderen Zeit sparen.


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

Durch Verwendung von <object> und <embed> Sie 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>

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>

Ich fand das funktioniert gut und der Browser behandelt es in Firefox. Ich habe IE nicht überprüft ...

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

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 so funktioniert, aber es hat seine eigenen speziellen Anforderungen.


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.

Weitere Informationen finden Sie unter Entwicklertools .


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


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.


PdfToImageServlet mit dem convert von ImageMagick.

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


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




pdf