从 arraybuffer 显示 pdf

Question

我从这段代码返回来自 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 文档

请帮助解决这个问题。如何显示pdf文件。

原文由 GRESPL Nagpur 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

jQuery.ajax() 默认情况下没有 responseType 设置。您可以使用 polyfill，例如实现二进制数据传输 的 jquery-ajax-blob-arraybuffer.js ，或使用 fetch() 。

另请注意，chrome，chrome 在显示 .pdf 时存在问题 <object> 和 <embed> 元素，请参阅 使用对象嵌入标记显示带有 URL alob 的 PDF PDF对象。使用 <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()

原文由 guest271314 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我很喜欢 guest271314 的回答，尤其是使用 fetch 的第二个版本，但我想添加一个不使用 polyfill 或实验技术的解决方案，如 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

原文由 jobB 发布，翻译遵循 CC BY-SA 3.0 许可协议