在 Edge/IE11 中显示 Blob PDF
Displaying Blob PDF in Edge/IE11
我有一个 Django 应用程序(我从中得到一些 html 作为客户端),以及一个需要显示的 base64 编码的 PDF。我尝试了多种方法,它们在 Chrome/Firefox.
中按预期工作
我正在使用 django,所以会有一些模板和一些 JavaScript。
pdf_preview_embed
是一个 div
嵌入数据 URL
<embed width=100% height=100% type="application/pdf" src="data:application/pdf;base64, {{ pdf }}"></embed>
不可接受的解决方案,因为它可能需要内联 megs 数据。在 Windows 7 下的 IE11 中工作,在 Windows 10 下的 Edge 和 IE11 上不工作。
嵌入 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
现在发生了一些事情:我发现 blob url 的来源是 null
,而不是 Edge 和 IE11 的应用程序,导致 pdf.js 拒绝打开它。服务器 CORS 配置为允许所有来源。我有点迷茫。
一个跨浏览器的解决方法,让 PDF.js 的 iframe 通过 iframe URI 加载 PDF 的 blob。
标准用例 blob URI 示例:
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
文件viewer.js:
在 webViewerOpenFileVia 函数中URL:
换行自:
if (file && file.lastIndexOf('file:', 0) === 0) {
至:
if (file && file.lastIndexOf('file:', 0) === 0 || file && file.lastIndexOf('blob:', 0) === 0) {
并进一步阻止查看器在 "origin" 以 IE 11/Edge 方式运行时中断:
在函数验证文件中URL:
换行自:
if (fileOrigin !== viewerOrigin) {
至:
if (fileOrigin != "null" && fileOrigin !== viewerOrigin) {
现在 FF、Chrome、IE 11 和 Edge 都在通过 URL.
中的标准 blob URI 传递的 iframe 中的查看器中显示 PDF
由于安全限制,Blob URL 将无法在 IE11 中使用!
我有一个 Django 应用程序(我从中得到一些 html 作为客户端),以及一个需要显示的 base64 编码的 PDF。我尝试了多种方法,它们在 Chrome/Firefox.
中按预期工作我正在使用 django,所以会有一些模板和一些 JavaScript。
pdf_preview_embed
是一个 div
嵌入数据 URL
<embed width=100% height=100% type="application/pdf" src="data:application/pdf;base64, {{ pdf }}"></embed>
不可接受的解决方案,因为它可能需要内联 megs 数据。在 Windows 7 下的 IE11 中工作,在 Windows 10 下的 Edge 和 IE11 上不工作。
嵌入 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
现在发生了一些事情:我发现 blob url 的来源是 null
,而不是 Edge 和 IE11 的应用程序,导致 pdf.js 拒绝打开它。服务器 CORS 配置为允许所有来源。我有点迷茫。
一个跨浏览器的解决方法,让 PDF.js 的 iframe 通过 iframe URI 加载 PDF 的 blob。
标准用例 blob URI 示例:
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
文件viewer.js:
在 webViewerOpenFileVia 函数中URL:
换行自:
if (file && file.lastIndexOf('file:', 0) === 0) {
至:
if (file && file.lastIndexOf('file:', 0) === 0 || file && file.lastIndexOf('blob:', 0) === 0) {
并进一步阻止查看器在 "origin" 以 IE 11/Edge 方式运行时中断:
在函数验证文件中URL:
换行自:
if (fileOrigin !== viewerOrigin) {
至:
if (fileOrigin != "null" && fileOrigin !== viewerOrigin) {
现在 FF、Chrome、IE 11 和 Edge 都在通过 URL.
中的标准 blob URI 传递的 iframe 中的查看器中显示 PDF由于安全限制,Blob URL 将无法在 IE11 中使用!