webentwicklung-frage-antwort-db.com.de

Richtig gestalten und servieren PDF Blob über HTML5-Datei- und URL-APIs

Ok, nehmen wir an, ich habe Dokumentendaten irgendwo gespeichert, nehmen wir willkürlich dieses pdf .

Fehler 1. Was ich tun möchte, ist einen Aufruf von AJAX an diese URL (da ich einige Authentifizierungsheader übergeben muss und es domänenübergreifend ist). Nehmen Sie dann die zurückgegebenen Daten, erstellen Sie eine blob-URL , legen Sie einen iFrame an das DOM an und weisen Sie die src an die blob-URL. 

Derzeit sieht mein Code so aus:

$.ajax({
  url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf'
}).done(function(data){
   var file = new Blob([data], {type:'application/pdf'}),
       url = URL.createObjectURL(file),
       _iFrame = document.createElement('iframe');
      _iFrame.setAttribute('src', url);
      _iFrame.setAttribute('style', 'visibility:hidden;');
      $('#someDiv').append(_iFrame);
});

Leider bekomme ich im iFrame ein "Fehler beim Rendern von PDF".

Ausgabe Nr. 2. Ich möchte, dass dies zu einem Dateidownload-Prompt führt. Sie sind nicht sicher, wie Sie dies gewährleisten können, da PDFs natürlich nur im iFrame angezeigt werden.

javascripthtml5fileblobs
20
Eric H.

jQuery.ajax unterstützt derzeit keine Blobs, siehe Bugreport # 7248 , das als Fixpunkt geschlossen ist.

Es ist jedoch leicht, XHR für Blobs ohne jQuery auszuführen:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    // Note: .response instead of .responseText
    var blob = new Blob([this.response], {type: 'application/pdf'}),
        url = URL.createObjectURL(blob),
        _iFrame = document.createElement('iframe');

    _iFrame.setAttribute('src', url);
    _iFrame.setAttribute('style', 'visibility:hidden;');
    $('#someDiv').append(_iFrame)        
  }
};

xhr.send();

Schamlos kopiert von HTML5rocks .

Wenn jQuery den Blob-Typ unterstützte, könnte es so einfach sein:

$.ajax({
  url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf',
  dataType:'blob'
})...
37
Ciantic
var src_url = your url here;
var contentDisposition = 'AlwaysInline';
var src_new = src_url.replace(/(ContentDisposition=).*?(&)/, '$1' + contentDisposition + '$2');

Auf diese Weise können Sie PDF-Dateien anzeigen, anstatt sie herunterzuladen.

Header ContentDisposition sollte "AlwaysInline" sein, dann wird nur Ihre Datei angezeigt, anstatt sie herunterzuladen.

0
sanj singh

Ich habe @Ciantic answer verwendet, um meine Antwort anzupassen. Ich habe die Verwendung von iframe obj vermieden und der Benutzer kann die Datei direkt von der Seite herunterladen.

var link = 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf';
$("body").addClass("loading"); // adding the loading spinner class

var xhr = new XMLHttpRequest();
xhr.open('GET',link,true);
xhr.responseType = 'blob';

        xhr.onload = function(e){
                 if (this.status == 200) {
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(new Blob([this.response], {type: 'application/pdf'}));
                    a.href = url;
                    a.download = 'report.pdf';
                    a.click();
                    window.URL.revokeObjectURL(url);
                    $('body').removeClass("loading"); //removing the loading spinner class
                  }else{
                      $('body').removeClass("loading") //removing the loading spinner class
                      console.log(this.status);
                      alert('Download failed...!  Please Try again!!!');
                  }
            };
            xhr.send();
0
LordDraagon