顯示PDF從arraybuffer

我從laravel DOMPDF從這個代碼顯示PDF從arraybuffer

$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

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

我越來越差錯

無法加載PDF文檔

請幫助解決這個問題。如何顯示pdf文件。

來源

2017-02-08 ctrl f5

jQuery.ajax()沒有responseType設置默認。您可以使用polyfill，例如jquery-ajax-blob-arraybuffer.js實現二進制數據傳輸，或利用fetch()。

還要注意，鉻，鉻在任<object>和<embed>元素顯示.pdf問題，請參閱Displaying PDF using object embed tag with blob URL，Embed a Blob using PDFObject。用元素代替<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()

來源

2017-02-13 01:19:13 guest271314

這很不錯，但是請注意它不會讓你命名PDF文件 – mlissner

@mlissner「命名PDF文件」是什麼意思？ – guest271314

當你下載它時，你會得到blob的URL，而不是文件的名字。 – mlissner

從我的測試性反應是在響應不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輸出...（PDF is blank when downloading using javascript ）。這將工作：

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();

來源

2017-02-10 11:53:28

改變'response.data'到'response'我得到完全空白的PDF格式後。沒有輸出。我認爲我們即將解決這個問題，可能需要在'responseType'或'Content-type'中更改任何地方。 –

@AndrewMonks _「從我的測試中，答覆是迴應而不是迴應。數據，所以下面應該工作「_你可以分享測試堆棧小號，jsfiddle http://jsfiddle.net，或plnkr http://plnkr.co？ – guest271314

不幸的是，因爲你不能上傳PDF文件到片段網站CORs阻止請求到其他網站的PDF文件Allthough看到http://stackoverflow.com/questions/34436133/pdf-is-blank-when-downloading-using-javascript我再次檢查，並得到一個空白輸出。嘗試使用原始的XMLHttpRequest而不是jQuery，它會工作 –

我喜歡guest271314回答了很多，尤其是在使用取第二個版本，但我想補充一點，不使用填充工具或實驗技術像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

來源

2017-02-13 13:14:39 jobB

顯示PDF從arraybuffer

回答

相關問題