我从这段代码中从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文件。
jQuery.ajax()``responseType默认情况下没有设置。您可以使用polyfill,例如实现二进制数据传输的jquery- ajax-blob-arraybuffer.js,也可以利用fetch()。
jQuery.ajax()``responseType
fetch()
。用<iframe>element代替<object>element。
<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()
.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()
jquery-ajax-blob-arraybuffer.js
jQuery.ajax()