web-dev-qa-db-fra.com

Affichage du pdf à partir de arraybuffer

Je renvoie des données de flux depuis laravel dompdf à partir de ce code

 $pdf = \App::make('dompdf.wrapper');
 $pdf->loadHTML("<div>This is test</div>");
 return $pdf->stream();

Et ceci est mon code ajax JS

    $.ajax({
        type:"GET",
        url: "/display",
        responseType: 'arraybuffer'
    }).done(function( response ) {
        var blob = new Blob([response.data], {type: 'application/pdf'});
        var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW";
        $("#pdfviewer").attr("data",pdfurl);
    });

Voici le HTML pour afficher le pdf après ajax

<object id="pdfviewer" data="/files/sample.pdf" type="application/pdf" style="width:100%;height:500px;"></object>

J'obtiens en dessous de l'erreur

Impossible de charger PDF

Veuillez aider à résoudre ce problème. Comment afficher le fichier pdf.

javascriptphpjquerylaraveldompdf
21
ctrl f5

jQuery.ajax() n'a pas de paramètre responseType par défaut. Vous pouvez utiliser un polyfill, par exemple jquery-ajax-blob-arraybuffer.js qui implémente le transport de données binaires, ou utiliser fetch().

Notez également que le chrome et le chrome ont des problèmes d'affichage de .pdf Aux éléments <object> Et <embed>, Voir Affichage de PDF en utilisant l'objet balise incorporée avec URL blob , Incorporer un blob à l'aide de PDFObject . Remplacer en utilisant l'élément <iframe> par l'élément <object>.

$(function() {

  var pdfsrc = "/display";

  var jQueryAjaxBlobArrayBuffer = "https://Gist.githubusercontent.com/SaneMethod/" 
                         + "7548768/raw/ae22b1fa2e6f56ae6c87ad0d7fbae8fd511e781f/" 
                         + "jquery-ajax-blob-arraybuffer.js";

  var script = $("<script>");

  $.get(jQueryAjaxBlobArrayBuffer)
  .then(function(data) {
    script.text(data).appendTo("body")
  }, function(err) {
    console.log(err);
  })
  .then(function() {
    $.ajax({
      url: pdfsrc,
      dataType: "arraybuffer"
    })
    .then(function(data) {
      // do stuff with `data`
      console.log(data, data instanceof ArrayBuffer);
      $("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], {
            type: "application/pdf"
          })))
     }, function(err) {
          console.log(err);
     });

  });
});

Utilisation de fetch(), .arrayBuffer()

  var pdfsrc = "/display";

  fetch(pdfsrc)
  .then(function(response) {
    return response.arrayBuffer()
  })
  .then(function(data) {
    // do stuff with `data`
    console.log(data, data instanceof ArrayBuffer);
    $("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], {
        type: "application/pdf"
    })))
  }, function(err) {
      console.log(err);
  });

plnkr http://plnkr.co/edit/9R5WcsMSWQaTbgNdY3RJ?p=preview

version 1 jquery-ajax-blob-arraybuffer.js, jQuery.ajax(); version 2 fetch(), .arrayBuffer()

12
guest271314

J'aime guest271314 répondre beaucoup, en particulier la deuxième version utilisant fetch, mais je voulais ajouter une solution qui n'utilise pas de polyfill ou une technologie expérimentale comme fetch.

Cette solution utilise la native XMLHttpRequest API pour créer la demande. Cela nous permet de changer le responseType en arrayBuffer.

  var xhr = new XMLHttpRequest();
  var pdfsrc = "https://upload.wikimedia.org/wikipedia/en/6/62/Definition_of_management.pdf";
  xhr.open('GET', pdfsrc, true);
  xhr.responseType = "arraybuffer";

  xhr.addEventListener("load", function (evt) {
    var data = evt.target.response;
    if (this.status === 200) {
      $("#pdfviewer").attr("src", URL.createObjectURL(new Blob([data], {
        type: "application/pdf"
      })));
    }
  }, false);

  xhr.send();

J'ai bifurqué guest271314s plnkr pour montrer cette méthode en action: http://plnkr.co/edit/7tfBYQQdnih9cW98HSXX?p=preview

4
jobB

D'après mes tests, la réponse est en réponse et non response.data, donc ce qui suit devrait fonctionner:

  $.ajax({
        type:"GET",
        url: "/display",
        responseType: 'arraybuffer'
    }).done(function( response ) {
        var blob = new Blob([response], {type: 'application/pdf'});
        var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW";
        $("#pdfviewer").attr("data",pdfurl);
    });

Bien qu'il semble que JQuery fasse quelque chose avec la réponse, provoquant une sortie PDF ... ( le PDF est vide lors du téléchargement en utilisant javascript ). Cela fonctionnera:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'test.pdf', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
   if (this.status == 200) {
        var blob=new Blob([this.response], {type:"application/pdf"});
        var pdfurl = window.URL.createObjectURL(blob)+"#view=FitW";
        $("#pdfviewer").attr("data",pdfurl);
   }
};
xhr.send();
2
Andrew Monks