web-dev-qa-db-fra.com

Créer et servir correctement PDF Blob via les API de fichiers et d'URL HTML5

Ok, disons que j'ai des données de documents stockées quelque part, prenons arbitrairement ce pdf .

Numéro 1. Ce que je veux faire, c'est faire un appel AJAX vers cette URL (car je dois transmettre des en-têtes d'authentification et qu'il s'agit de domaines croisés). Ensuite, prenez les données renvoyées, créez une url blob pour elle, ajoutez un iFrame au DOM et dirigez la variable src vers l’URL blob. 

Actuellement, mon code ressemble à ceci:

$.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);
});

Malheureusement, je reçois le message «Échec du rendu du fichier PDF» dans l'iFrame.

Numéro 2. J'aimerais que cela aboutisse à une invite de téléchargement de fichier. Vous ne savez pas comment vous en assurer, étant donné que les PDF s'afficheront naturellement dans l'iFrame.

javascripthtml5fileblobs
20
Eric H.

jQuery.ajax ne supporte pas actuellement les blobs, voir ce rapport de bogue # 7248 qui est fermé en tant que wontfix.

Cependant, il est facile de faire XHR pour des blobs sans jQuery:

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();

Sans vergogne copié de HTML5rocks .

Si jQuery supportait le type Blob, cela pourrait être aussi simple que:

$.ajax({
  url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf',
  dataType:'blob'
})...
37
Ciantic

J'ai utilisé @Ciantic answer pour adapter ma réponse. J'ai évité d'utiliser iframe obj et l'utilisateur peut télécharger le fichier directement à partir de la page.

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