在Edge/IE11中显示Blob PDF [英] Displaying Blob PDF in Edge/IE11

问题描述

我有一个django应用程序(从中获得一些html作为客户端)，以及一个需要显示的base64编码的PDF.我尝试了多种方法，这些方法可以在Chrome/Firefox中正常工作.

I have a django app (from which I get some html as a client), and a base64-encoded PDF which needs to be displayed. I've tried multiple approaches, which work as expected in Chrome/Firefox.

我正在使用django，因此会有一些模板和一些JavaScript.

I'm working with django, so there will be some templates and some JavaScript.

pdf_preview_embed是div

pdf_preview_embed is a div

<embed width=100% height=100% type="application/pdf" src="data:application/pdf;base64, {{ pdf }}"></embed>

不可接受的解决方案，因为它可能需要内联数据.在Windows 7下的IE11中可以使用，而在Windows 10下的Edge和IE11中则不能使用.

Unacceptable solution, because it may require inlining megs of data. Works in IE11 under Windows 7, doesn't work on Edge and IE11 under Windows 10.

base64binary实现

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中也不起作用.

Also does not work in Edge and IE11.

$('#pdf_preview_embed').html(
    '<iframe src="'+pdfURL+'" style="width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe>'
);

Edge声称它无法打开pdf，并且IE11没有显示任何内容.

Edge claims it can't open pdf, and IE11 doesn't show anything.

现在这里发生了一些事情:我发现blob url的起源是null，而不是Edge和IE11的应用程序，导致pdf.js拒绝打开它.服务器CORS配置为允许所有来源.我有点迷茫.

Now here something happens: I found out the blob url origin is null, instead of the application for Edge and IE11, causing pdf.js to refuse opening it. Server CORS is configured to allow all origins. I am a bit lost.

推荐答案

一种跨浏览器的解决方法，可以使iframe为PDF.js的iframe通过iframe URI加载PDF块.

A cross-browser workaround to have an iframe of PDF.js load a blob of a PDF via the iframe URI.

标准用例blob URI的示例:

An example of a standard usage case blob URI:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

文件viewer.js:

File viewer.js:

在功能webViewerOpenFileViaURL中:

within function webViewerOpenFileViaURL:

更改行来自:

if (file && file.lastIndexOf('file:', 0) === 0) {

收件人:

if (file && file.lastIndexOf('file:', 0) === 0 || file && file.lastIndexOf('blob:', 0) === 0) {

并进一步阻止查看器在IE 11/Edge方式下出现原始"行为时中断:

And to further stop the viewer from breaking when the "origin" is behaving in an IE 11/Edge manner:

在validateFileURL函数内:

within function validateFileURL:

更改行来自:

if (fileOrigin !== viewerOrigin) {

收件人:

if (fileOrigin != "null" && fileOrigin !== viewerOrigin) {

现在，FF，Chrome，IE 11和Edge都通过URL中的标准blob URI传递的iframe中的查看器中显示PDF.

Now FF, Chrome, IE 11, and Edge all display the PDF in a viewer in the iframe passed via standard blob URI in the URL.

这篇关于在Edge/IE11中显示Blob PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！