PDF ist leer, wenn das herunterladen mit javascript

Ich habe ein web-service, gibt Inhalt einer PDF-Datei in Ihrer Antwort. Ich will zum download als pdf-Datei, wenn der Benutzer auf den link klickt. Der javascript-code, den ich geschrieben habe in der Benutzeroberfläche wie folgt:

$http.get('http://MyPdfFileAPIstreamURl').then(function(response){
var blob=new File([response],'myBill.pdf',{type: "text/pdf"});
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="myBill.pdf";
link.click();
});

'Antwort' enthält die PDF-byte-array-servlet-Ausgabestrom "MyPdfFileAPIstreamURl'. Und auch der Strom ist nicht verschlüsselt.

So, wenn ich auf den link klicken, PDF-Datei heruntergeladen, erfolgreich Größe von rund 200KB. Aber wenn ich diese Datei öffnen, es öffnet sich mit leeren Seiten. Der Start Inhalt des heruntergeladenen pdf-Datei ist im image.

Kann ich nicht verstehen, was ist hier falsch. Hilfe!!!

Dies ist die heruntergeladene pdf-Datei ab Inhalt:

PDF ist leer, wenn das herunterladen mit javascript

Sie sind mit einem media-Typ "text/pdf"; das ist ärger, pdf ist kein Textformat, es ist Binär, und behandeln Sie es als text, kann es zerstören. Versuchen Sie application/pdf statt.
Geändert, application /pdf, aber Problem ist immer noch die gleiche.
Dennoch ist es falsch zu verwenden text - /pdf-Datei hier. Darüber hinaus kann Ihr screenshot sieht aus wie irgendwo entlang der Linie etwas code behandelt die Datei als text, Lesen Sie es mit einem single-byte-Kodierung (Latin1) und schreiben Sie es mit UTF-8.
Das könnte Ihnen helfen: stackoverflow.com/a/31763030/5042982. Hinzufügen responseType :blob war für mich in AngularJS.

InformationsquelleAutor programmer129 | 2015-12-23

  1. 22

    gelöst via XMLHttpRequest und xhr.responseType = 'arraybuffer';
    code:

    var xhr = new XMLHttpRequest();
    xhr.open('GET', './api/exportdoc/report_'+id, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
       if (this.status == 200) {
          var blob=new Blob([this.response], {type:"application/pdf"});
          var link=document.createElement('a');
          link.href=window.URL.createObjectURL(blob);
          link.download="Report_"+new Date()+".pdf";
          link.click();
       }
    };
xhr.send();
    Danke @Alexej, ich hatte das gleiche problem mit angularjs ich musste responseType = "arraybuffer" zu
    Danke. Das hat mir wirklich geholfen und gearbeitet
    Danke @Alexey hat es bei mir auch.

    InformationsquelleAutor Alexey G

  2. 18

    holte ich mir die Daten vom server als string(die base64-codierte Zeichenfolge) und dann auf der client-Seite, die ich decodiert es zu base64 und dann zu array buffer.

    Beispielcode

    function solution1(base64Data) {

    var arrBuffer = base64ToArrayBuffer(base64Data);

    //It is necessary to create a new blob object with mime-type explicitly set
    //otherwise only Chrome works like it should
    var newBlob = new Blob([arrBuffer], { type: "application/pdf" });

    //IE doesn't allow using a blob object directly as link href
    //instead it is necessary to use msSaveOrOpenBlob
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(newBlob);
        return;
    }

    //For other browsers: 
    //Create a link pointing to the ObjectURL containing the blob.
    var data = window.URL.createObjectURL(newBlob);

    var link = document.createElement('a');
    document.body.appendChild(link); //required in FF, optional for Chrome
    link.href = data;
    link.download = "file.pdf";
    link.click();
    window.URL.revokeObjectURL(data);
    link.remove();
}

function base64ToArrayBuffer(data) {
    var binaryString = window.atob(data);
    var binaryLen = binaryString.length;
    var bytes = new Uint8Array(binaryLen);
    for (var i = 0; i < binaryLen; i++) {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes;
};
    Diese Antwort hat mir geholfen, mate! Danke.
    wow, vielen Dank für Ihre Kommentare
    Ok funktioniert in der desktop-und der android-Browser. Getestet auf dem iPhone (safari und chrome) und hat nicht funktioniert.
    Danke!!! Mit createObjectURL geholfen mit der fehlerhaften Netzwerk-Fehler, die ich hatte, aber meine PDF nicht geöffnet werden konnte, aber deine Lösung habe es funktioniert.
    Ab 2018 durch die Nutzung von chrome / windows 10 dies funktioniert wie erhofft.

    InformationsquelleAutor Sajjad Ali Khan

Schreibe einen Kommentar