Отображение BLOB-PDF в Edge/IE11
У меня есть приложение Django (из которого я получаю HTML в качестве клиента), и PDF в кодировке Base64, который должен отображаться. Я пробовал несколько подходов, которые работают как положено в Chrome/Firefox.
Я работаю с django, поэтому будет несколько шаблонов и немного JavaScript.
pdf_preview_embed
это див
Вставить DataURL
<embed width=100% height=100% type="application/pdf" src="data:application/pdf;base64, {{ pdf }}"></embed>
Неприемлемое решение, потому что оно может потребовать встраивания мегабайтов данных. Работает в IE11 под Windows 7, не работает на Edge и IE11 под Windows 10.
Вставить Blob
var blob = new Blob( [Base64Binary.decode(pdf)], {'type': 'application/pdf'} );
pdfURL = URL.createObjectURL( blob );
$('#pdf_preview_embed').html(
'<embed width=100% height=100% type="application/pdf" src="'+pdfURL+'"></embed>'
);
Также не работает в Edge и IE11.
$('#pdf_preview_embed').html(
'<iframe src="'+pdfURL+'" style="width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe>'
);
Edge утверждает, что не может открыть pdf, а IE11 ничего не показывает.
На самом деле с помощью pdf.js для отображения PDF
Теперь здесь что-то происходит: я выяснил происхождение null
вместо приложения для Edge и IE11, заставляя pdf.js отказаться от его открытия. Сервер CORS настроен на разрешение всех источников. Я немного растерялся.
1 ответ
Кросс-браузерный обходной путь, чтобы iframe PDF.js загружал BLOB-объект PDF через URI iframe.
Пример стандартного URI блоба для случая использования:
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
Файл viewer.js:
внутри функции webViewerOpenFileViaURL:
изменить строку с:
if (file && file.lastIndexOf('file:', 0) === 0) {
чтобы:
if (file && file.lastIndexOf('file:', 0) === 0 || file && file.lastIndexOf('blob:', 0) === 0) {
И для того, чтобы предотвратить остановку зрителя, когда "источник" ведет себя в стиле IE 11/Edge:
внутри функции validateFileURL:
изменить строку с:
if (fileOrigin !== viewerOrigin) {
чтобы:
if (fileOrigin != "null" && fileOrigin !== viewerOrigin) {
Теперь FF, Chrome, IE 11 и Edge отображают PDF в средстве просмотра в iframe, передаваемом через стандартный BLRI URI в URL.
URL-адреса BLOB-объектов не будут работать в IE11 из-за ограничений безопасности!