在Edge/IE11中显示Blob PDF

Question

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

我正在使用django,所以会有一些模板和一些JavaScript.

pdf_preview_embed 是一个div

嵌入DataURL

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

不可接受的解决方案,因为它可能需要内联数据.在Windows 7下的IE11中工作,在Windows 10下的Edge和IE11上不起作用.

嵌入Blob

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

<iframe> Blob

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

Edge声称它无法打开pdf,IE11也没有显示任何内容.

实际上使用pdf.js来显示pdf

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

Answer 1

跨浏览器解决方法，让 PDF.js 的 iframe 通过 iframe URI 加载 PDF 的 blob。

标准使用案例 Blob URI 的示例：

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

文件查看器.js：

在函数 webViewerOpenFileViaURL 中：

更改行：

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

到：

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

当“origin”以 IE 11/Edge 方式运行时，为了进一步阻止查看器崩溃：

在函数 validateFileURL 中：

更改行：

if (fileOrigin !== viewerOrigin) {

到：

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

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