显示来自arraybuffer的pdf

我从这个代码返回来自laravel dompdf的stream数据

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

这里是HTML显示PDF后ajax

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

我得到以下错误

无法加载PDF文档

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

Answer 1

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

另请注意，chrome，chromium在<object>和<embed>元素上都显示.pdf ，请参阅使用blob URL显示使用对象embedded标记的PDF ， 使用PDFObjectembeddedBlob 。 用<iframe>元素replace<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()

Answer 2

我很喜欢guest271314回答很多，特别是使用fetch的第二个版本，但我想添加一个不使用polyfill或像fetch这样的实验性技术的解决scheme。

该解决scheme使用本机XMLHttpRequest API来创build请求。 这允许我们将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

Answer 3

在我的testing中，响应是响应而不是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();