PDF-Byte-Daten in HTML einbetten

Dies sollte funktionieren, aber es scheint, dass mir etwas fehlt.PDF-Byte-Daten in HTML einbetten

Ich habe eine PDF-Datei auf einem lokalen Laufwerk. Offensichtlich können Chrome und andere Browser diese lokale URL nicht bekommen, da sie sandboxed ist, also habe ich ein Servlet, das die Daten vom lokalen Laufwerk zieht und sie über einen Ajax-Aufruf an den Webclient zurücksendet. Ich bekomme keine Fehler und es scheint, dass ein PDF-Viewer geladen wird, aber die Datei selbst wird nicht angezeigt. Ich kodiere es vor der Zeit, aber es wird immer noch nicht funktionieren. Ich werde meine zahlreichen Ansätze unten zeigen, aber ich werde den Servlet-Code nicht einschließen, da das zu funktionieren scheint.

Versuch 1:

function embedFile(){ 
    $.get("FileGetter", function(pdfText){ 

     var base64EncodedPDF = b64EncodeUnicode(pdfText); 
     $("#embedHolder").append("<object id='embedder' width='80%' height='600px'><embed width=100% height=100%" 
            + ' type="application/pdf"' 
            + ' src="data:application/pdf;base64,' 
            + base64EncodedPDF 
            + "></embed></object>"); 

      }); 
     } 

function b64EncodeUnicode(str) { 
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { 
       return String.fromCharCode('0x' + p1); 
      })); 
     }

Versuch 2:

function embedFile(){ 
    $.get("FileGetter", function(pdfText){ 

     var base64EncodedPDF = b64EncodeUnicode(pdfText); 
     var obj = $('<object id="repObjID" type="application/pdf" width="100%" height="600" border="2"></object>'); 
     obj.attr('data',base64EncodedPDF); 
     var embed = $('<embed type="application/pdf"></embed>'); 
     embed.attr('src',base64EncodedPDF); 
     $('#repObjID').append(embed); 
     $("#docHolder").html(obj); 
    } 

function b64EncodeUnicode(str) { 
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,    function(match, p1) { 
       return String.fromCharCode('0x' + p1); 
      })); 
}

Quelle

2016-08-01 Marcel Marino

1) Sind Sie sicher, dass Ihre PDF-Viewer base64 Daten akzeptiert in der src-URL codiert? 2) Wie erhält der Server die Daten vom lokalen Laufwerk? Ich schlage vor, dass der Benutzer die Datei auswählen muss, die dann (über AJAX?) In das Servlet hochgeladen wird? –

Nicht ganz. Der Benutzer wählt einen Datensatz in der Datenbank aus, und in diesem Datensatz befindet sich eine URL, die auf ein lokales Verzeichnis verweist. Der Server liest dann die Daten von der lokalen URL und konvertiert sie in Bytes, die dann über die Antwort an den Client übertragen werden. Ich dachte * es funktionierte, aber ich konnte das Dokument in einem neuen Fenster halb erfolgreich öffnen. Die PDF-Datei wird angezeigt und entspricht der korrekten Anzahl von Seiten. Jede Seite ist jedoch vollständig leer. Wie für den PDF-Viewer verwende ich den Chrome-Standard. –

Sie könnten einen binären [Blob] (https://developer.mozilla.org/en-US/docs/Web/API/Blob) (mit Inhaltstyp) erstellen und dann eine [Objekt-URL] erstellen (https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL), und lade das in einem iframe. – Rudie

1. Laden Sie die binären Daten mit Ajax, in eine Arraybuffer

var xhr = new XMLHttpRequest; 
xhr.open('get', '/path/to/pdf, true); 
xhr.responseType = 'arraybuffer'; 
xhr.send();

2. Erstellen Blob- und Objekt-URL

var blob = new Blob([xhr.response], {type: 'application/pdf'}); 
var url = URL.createObjectURL(blob);

3. URL laden in iframe

iframe.src = url;

Demo: https://webblocks.nl/tests/ajax-pdf.html

Quelle

2018-01-03 22:44:08 Rudie

Antwort

Verwandte Themen