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

Ich musste eine PDF-Vorschau mit React erstellen. Nachdem ich mehrere Bibliotheken ausprobiert hatte, war meine optimale Lösung, die Daten zu holen und sie zu ebmed.

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

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

Answer 2

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

Answer 3

1. Konstruieren Sie einen Blob aus den PDF-Bytes der Eingabe
2. Verwenden Sie eine iframe y PDF.js gepatcht mit dieses browserübergreifende Abhilfe

Der URI für den iframe sollte etwa 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 eine Standard-Blob-URI in der URL übergeben wird.

Answer 4

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

Das Folgende einbetten iframe auf eine beliebige HTML-Datei und genießen Sie die Ergebnisse:

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

Answer 5

Ich habe herausgefunden, dass die beste Methode zum Einbetten einer PDF-Datei in meinem Fall die Verwendung von bootstrap denn es zeigt nicht nur das PDF an, sondern füllt auch den verfügbaren Platz und Sie können das Verhältnis nach Belieben festlegen. Hier ist ein Beispiel von dem, was ich mit ihm gemacht:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="http://example.com/the.pdf" type="application/pdf" allowfullscreen></iframe>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>