Как вставить кодированный PDF-код в формате Base64 в атрибут данных `5 <object>` HTML 5?

Таким образом, в моем приложении пользователи могут загружать файл в <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 файл, который пользователь загружает непосредственно на веб-страницу?

Ответы

Ответ 1

Да, я работал с файлом...

HTML:

<object id="pdf" data="" type="application/pdf"></object>

Javascript (JQuery)

var fr = new FileReader();
fr.onload = function(evtLoaded) {
  $('#pdf').attr('data', evtLoaded.target.result );
};
fr.readAsDataURL(inFile);

По сравнению с вашим подходом я использую "Я закончил чтение файла" - обратный вызов по-другому, используя событие. Если я правильно понял: "loadend" всегда будет вызываться независимо от того, читает ли он результат или неудачно.