web-dev-qa-db-ja.com

配列バッファーからのpdfの表示

私はこのコードからlaravel dompdfからストリームデータを返しています

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

そして、これは私のJS ajaxコードです

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

ここにajaxの後にpdfを表示するHTMLがあります

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

エラーが発生しています

ロードに失敗しましたPDF document

これを修正するのを手伝ってください。 PDFファイルの表示方法。

javascriptphpjquerylaraveldompdf
21
ctrl f5

jQuery.ajax()には、デフォルトでresponseType設定がありません。ポリフィルを使用できます。たとえば、バイナリデータ転送を実装する jquery-ajax-blob-arraybuffer.js またはfetch()を使用できます。

また、クロム、クロムには_.pdf_および_<object>_要素のいずれかで_<embed>_を表示する際に問題があります。 埋め込みオブジェクトを使用したPDFの表示を参照してくださいBlob URLのタグ 、 PDFObject を使用してBlobを埋め込みます。 _<iframe>_要素の代わりに_<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);
     });

  });
});
_

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

バージョン1 _jquery-ajax-blob-arraybuffer.js_、jQuery.ajax();バージョン2 fetch()、.arrayBuffer()

12
guest271314

私は guest271314 が好きです。特にフェッチを使用する2番目のバージョンではよく答えますが、ポリフィルやfetchなどの実験技術を使用しないソリューションを追加したかったのです。

このソリューションは、ネイティブ XMLHttpRequest API を使用してリクエストを作成します。これにより、responseTypeを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();

この方法を実際に実行するために、guest271314s plnkrを分岐させました： http://plnkr.co/edit/7tfBYQQdnih9cW98HSXX?p=preview

4
jobB

私のテストから、応答はresponse.dataではなく応答にあるため、次のように動作するはずです。

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

JQueryは応答を使用して何かを実行しているように見えますが、空白PDF出力...（ javascriptを使用してダウンロードする場合、PDFは空白です ）。

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