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 implementation

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

＆LT; IFRAME＆GT;斑点

$('#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 origin是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

File 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都会在通过网址中的标准blob URI传递的iframe中的查看器中显示PDF。

Answer 2

由于安全限制，blob URL在IE11中不起作用！

在Edge / IE11中显示Blob PDF

嵌入DataURL

嵌入Blob

＆LT; IFRAME＆GT;斑点

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

2 个答案: