JavaScript Byte Array PDF im Browser anzeigen

[TiloS]

Hallo,

ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) im Zugriff.

Wie kann ich daraus das PDF im Browser anzeigen lassen?

Gruß
TiloS

 

[der_guru]

Das klingt ein wenig kompliziert. Warum nicht über ein Servlet sich das PDF geben lassen?
Kannst du vielleicht noch ein paar Dinge zusätzlich posten
- Warum PDF als ByteArray
- Warum selbst anzeigen und nicht mittels Acrobat PDF oder andere PDF Reader
- Mit welchen Techonologien arbeitetest du sonst noch? PHP, JAVA, ...?

MfG

 

[TiloS]

Wenn es dafür bessere Möglichkeiten gibt, bin ich offen dafür.

- Warum PDF als ByteArray

Meines Wissens die effizienteste Methode das zu übertragen. Der Webservice liefert das momentan so. Das könnte man aber auch ändern. Ich frag mich nur, wie sollte es der Webservice dann liefern?

- Warum selbst anzeigen und nicht mittels Acrobat PDF oder andere PDF Reader

Wie übergebe ich das, damit es der PDF Reader direkt anzeigt?

- Mit welchen Techonologien arbeitetest du sonst noch? PHP, JAVA, ...?

Die Daten liefert komplett der Webservive (in C# geschrieben). Der generiert auf Anfrage dynamisch ein PDF, überträgt es zum Client und der soll es einfach einzeigen.

Auf der Client-Seite arbeite ich mit JavaScript/ExtJs. Wie ich das letztendlich eingezeigt bekomme, ist mir egal. Ich hab nur momentan noch keine Lösung.

 

[WingX]

PDF anzeigen geht doch nur über einen PDF Reader. Da du nicht weißt, welcher der bevorzugte (und verfügbare) Reader ist, würde ich im Browser nur nen Link auf das (abgespeicherte) PDF anzeigen und per Klick darauf wird dann der im Browser hinterlegte Reader für die Aktion geöffnet. Eventuell kannst du den Link auch programmatisch öffnen. Du müsstest dem Browser mitteilen, dass du vorhast, ein PDF zu öffnen. Mit ziemlicher Sicherheit musst du es vorher abspeichern.

 

[TiloS]

Ok, das hört sich logisch an. So könnte ich es versuchen.

Nur noch mal, um das auszuschließen, mit:

window.open("data:application/pdf," + response,'_blank','height=600,width=400'); -> evtl. das response noch dekodieren

bin ich auf dem Holzweg, sehe ich das richtig?

 

[Rossie]

Aber sowas von Damit kannst Du nur Dateien anzeigen.

Ergänzung (12. April 2012)

Es gibt einen PDF-Renderer in JavaScript: https://github.com/mozilla/pdf.js/blob/d8235925ac46f18328645ed689eee8a58d992a26/examples/helloworld/hello.js. Inwieweit sich das für Deinen Anwendungsfall eignen würde, weiß ich nicht. Ansonsten wüsste ich keinen Weg, wie Du die Daten mittels JavaScript direkt verarbeiten könntest.

Hast Du Kontrolle über den Web-Service? Dann lass Dir die Datei als pdf zurückgeben. Mit dem korrekten Response-Header öffnet sich der Reader automatisch (wenn installiert).

 

[TiloS]

Will ich doch eigentlich auch.
Das "response" ist doch die PDF-Datei als Byte-Array, die ich anzeigen möchte.

Zu Deiner Ergänzung: Ja, das ist wahrscheinlich die beste Lösung. Zugriff auf den Webservice hab ich, das kann ich mit einem Kollegen absprechen.

 

[Rossie]

Will ich doch eigentlich auch.
Das "response" ist doch die PDF-Datei als Byte-Array, die ich anzeigen möchte.

Ja, die Daten sind da drin. Aber das weiß der Browser nicht. Der Response-Header ist entscheidend dafür, was der Browser daraus macht. In Deinem Fall werden die Rohdaten an das Skript geliefert.

 

[Daaron]

Eben, es dreht sich effektiv alles um den Header. Ein Webservice, egal ob nun selbstgeschrieben in C-irgendwas oder geliefert von einem bestehenden Webserver wie Apache, pumpt in erster Linie nur Strings und Bitströme raus. Was der Client damit anfangen soll definiert ausschließlich der Header. Schreib den richtigen Header, und du kannst PNGs, PDFs, MP3s,.... als String übertragen. Schreib den falschen, und es kommt nur Suppe raus und der Client wird nie etwas damit anfangen können. Genauso sind Dateinamen nur Schall und Rauch. Ich hab mal ne PDF mit korrektem PDF-Header aber ohne Endung im Dateinamen rausgepumpt... es ging trotzdem.

Dein Webservice muss als allererstes den Header ausgeben, in dem Falle als content type application/pdf. Danach kommt die eigentliche Datenlast. Um den Rest kümmert sich dann der Client, sofern er mit application/pdf was anfangen kann (also n Reader/Plugin installiert ist), gemäß seinen Systemvorgaben.
Das ist alles keine Frage von Client-JS sondern serverseitigem Code.

 

[TiloS]

Ok, wir haben es im Webservice umgesetzt. Damit funktioniert es, danke.

public void ResponsePdf()
{
    HttpResponse resp = HttpContext.Current.Response;
    resp.Clear();

    byte[] pdfArr = GetPdf();

    if (pdfArr != null && pdfArr.Length > 0)
    {
        resp.ContentType = "application/pdf";
        resp.BinaryWrite(pdfArr);
        resp.Flush();
    }
    else
    {
        string strResponseErr = "Error by generation PDF-File.";

        resp.ContentType = "text/html";
        resp.Write(strResponseErr);
        resp.Flush();
    }
}

und beim Client:

window.open('http://....svc/JSON/ResponsePdf/...','','width=800,height=800,left=50,top=0,scrollbars=0,toolbar=no,resizable=0');

Damit wird es im Firefox und im IE direkt angezeigt.