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

FDView kombiniert PDF2SWF (die ihrerseits auf xpdf ) mit einer SWF Viewer, mit dem Sie PDF-Dokumente im Handumdrehen konvertieren und auf Ihrem Server einbetten können.

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

Aber für einfache PDF-Dokumente sollte FDView recht gut funktionieren.

Answer 2

Scribd verlangt nicht mehr, dass Sie Ihre Dokumente auf ihrem Server hosten. Wenn Sie ein Konto bei ihnen erstellen, erhalten Sie eine Herausgeber-ID. Es braucht nur ein paar Zeilen JavaScript-Code, um PDF-Dateien zu laden, die auf Ihrem eigenen Server gespeichert sind.

Für weitere Einzelheiten siehe Entwickler-Tools .

Answer 3

Update - Adobe PDF Embed API

Adobe hat seine Adobe PDF-Einbettungs-API die völlig kostenlos ist. Da sie das PDF-Format selbst entwickelt haben, ist ihre API wahrscheinlich die beste für diesen Zweck.

• Es liefert die hochwertigste verfügbare PDF-Rendering-Qualität.
• Sie können die Benutzerfreundlichkeit vollständig anpassen und wählen, wie eine PDF-Datei angezeigt werden soll.
• Sie erhalten auch Analysen zur PDF-Nutzung, so dass Sie verstehen können, wie die Nutzer mit PDFs interagieren, einschließlich der Verweildauer auf einer Seite und der Suchvorgänge.

Alles, was Sie tun müssen, ist die Erstellung eines api_key und verwenden Sie es in dem Codeausschnitt.

PDF anzeigen nach file_url

Hier ist ein Beispiel für einen Codeschnipsel, den Sie einfach zu Ihrem HTML-Code hinzufügen können, um die Vorteile der API für die Anzeige von PDF-Dateien zu nutzen file_url . Sie müssen Folgendes hinzufügen { location: { url: "url_of_the_pdf" } } Konfiguration.

<div id="adobe-dc-view"></div>

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content: { location: { url: "url_of_the_pdf" } },
      metaData: { fileName: "file_name_to_display" }
    }, {});
  });
</script>

PDF als Puffer anzeigen

Hier ist ein Beispiel für einen Codeschnipsel, den Sie einfach in Ihren HTML-Code einfügen und die Vorteile der API für die Anzeige von PDF-Dateien nutzen können, wenn Sie den Puffer (z. B. eine lokale Datei) haben. Sie müssen Folgendes hinzufügen { promise: <FILE_PROMISE> } Konfiguration.

<div id="adobe-dc-view"></div>

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content: { promise: <FILE_PROMISE> }
      metaData: { fileName: "file_name_to_display" }
    }, {});
  });
</script>

Answer 4

Auf diese Weise habe ich mit AXIOS und Vue.js:

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

urlPDF dynamisch in HTML einfügen:

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

Answer 5

PdfToImageServlet mit ImageMagick's convert Befehl.

Beispiel für die Verwendung: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>