Welche Methode wird empfohlen, um PDF in HTML einzubetten?
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.
Vorher hatte ich ein Problem mit dem Einbetten von base64 kodierten PDF-Dateien, weil die URI-Beschränkung, so dass alle Dateien über 2 MB nicht richtig auf Chrome gerendert.
Meine Lösung ist:
Erzeugen Sie den temporären DOM String auf Basis von Blob.
const blob = dataURItoBlob(this.dataUrl);
var temp_url = window.URL.createObjectURL(blob);
Entscheiden Sie, wo Sie den iframe an das DOM anhängen wollen:
const target = document.querySelector(targetID);
target.innerHTML = `<iframe src='${temp_url}' type="application/pdf"></iframe>
Um die Datei in den Browser zu streamen, siehe Stack Overflow Frage Streaming einer PDF-Datei als Binärdatei an den Browser mit .NET 2.0 - Beachten Sie, dass dies mit geringfügigen Abweichungen unabhängig davon funktionieren sollte, ob Sie eine Datei aus dem Dateisystem oder eine dynamisch generierte Datei bereitstellen.
Der MSDN-Artikel, auf den verwiesen wird, vertritt jedoch eine eher vereinfachende Sicht der Welt. Erfolgreiches Streamen einer PDF-Datei in den Browser über HTTPS auch für einige der Kopfzeilen, die Sie möglicherweise liefern müssen.
Mit diesem Ansatz ist ein iframe wahrscheinlich die beste Lösung. Es gibt ein Webformular, das die Datei streamt, und dann wird der Iframe auf einer anderen Seite mit seinem src Attribut auf das erste Formular gesetzt.
Wenn Sie die PDF-Dateien nicht selbst hosten möchten oder Ihren PDF-Viewer mit zusätzlichen Sicherheitsfunktionen ausstatten möchten, z. B. um zu verhindern, dass Benutzer die PDF-Datei herunterladen. Ich empfehle die Verwendung von CloudPDF. https://cloudpdf.io
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudPDF Viewer</title>
<style>
body, html {
height: 100%;
margin: 0px;
}
</style>
</head>
<body style="height: 100%">
<div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
<script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
const config = {
documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
darkMode: true,
};
CloudPDF(config, document.getElementById('viewer')).then((instance) => {
});
});
</script>
</body>
</html>
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
9 Stimmen
Versuchen Sie pdf2htmlEX: github.com/coolwanglu/pdf2htmlEX
1 Stimmen
Es gibt einen großartigen Vergleich nicht nur von spezifischen Lösungen, sondern auch von allgemeinen Strategien, im Wiki des pdf2htmlEX-Repos . Außerdem habe ich es noch nicht ausprobiert, este scheint eine beibehaltene Abzweigung zu sein.