Отображение pdf-файла из arraybuffer

jQuery.ajax() по умолчанию не имеет параметра responseType . Вы можете использовать polyfill, например jquery-ajax-blob-arraybuffer.js, который реализует двоичную передачу данных или использует fetch() .

Также обратите внимание, что хром, хром имеют проблемы с отображением .pdf в элементах <object> и <embed> , см. Отображение PDF с использованием тега embed embed с URL-адресом blob , Вставить Blob с помощью PDFObject . Замените элемент <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 много, особенно вторая версия с использованием fetch, но я хотел добавить решение, которое не использует полиполк или экспериментальную технологию, такую ​​как 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

Из моих тестов ответ отвечает не 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();