Таким образом, в моем приложении пользователи могут загружать файл в <input type = "file" id = "my-file">
(вход в файл HTML 5). Я могу впоследствии захватить этот файл, используя следующий Javascript:
var files = $("#my-file").files;
var file = files[0];
Можно ли как-то использовать этот var file
как data
в теге <object>
? Ниже приведен пример тега объекта, где PDF файл захватывается URL-адресом и обращается к серверу.
<object data="data/test.pdf" /*<-- I want the var file here */ type="application/pdf" width="300" height="200">
</object>
Как я могу это сделать? Обратите внимание: я должен поддерживать Internet Explorer 11.
UPDATE:
Я пробовал что-то, что в конечном итоге закончилось неудачей. Я преобразовал PDF в data-uri с помощью FileReader, а затем использовал его в атрибуте data
тега <object>
, который отлично отображается в Chrome, но совсем не в Internet Explorer.
var files = $(e.currentTarget.files);
file = files[0];
var reader = new FileReader();
reader.onloadend = function() {
var data = reader.result;
console.log(data);
$("#content").prepend('<object id="objPdf" data="'+data+'" type="application/pdf"></object>');
};
reader.readAsDataURL(file);
Если данные считывателя выглядят следующим образом:
data:application/pdf;base64,JVBERi0xLjQKJe...
Вот почему PDF не работает с этим подходом в Internet Explorer (только изображения)... так грустно: (
ОБНОВЛЕНИЕ 2:
Прошел pdf.js с некоторым успехом... он отображает PDF на странице, хотя он невероятно медленный (5 секунд для одна страница) в Internet Explorer 11. Он также отображает только одну страницу за раз, тогда как тег <object>
отображал все страницы мгновенно в приятном прокручиваемом контейнере. Хотя это крайний вариант возврата, я бы не хотел идти по этому пути.
У кого-нибудь есть другая идея относительно того, как я могу просмотреть PDF файл, который пользователь загружает непосредственно на веб-страницу?