Blob, Uint8Aray, atob/btoa in lt IE9 browser

标签(空格分隔): compatibility


之前写的代码全部在Chrome调试,用IE打开发现各种问题。

1. <a download=\"\"></a>

首先IE不支持HTML5的download属性:

var a = document.createElement(\'a\');
var ev = document.createEvent(\'HTMLEvents\');
var name = \'报告导出列表\' + new Date().toLocaleString() + \'.xlsx\';
ev.initEvent(\'click\', true, true);
a.download = name;
a.href = URL.create URL(blob);
a.click();

在IE下是不支持的,可以使用msSaveBlob来解决(IE10+)

if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(blob, name);
}

a.click();

2. atob/btoa

64的encode(btoa)和decode(atob)。IE10+可以支持。低于IE10的可以使用polyfill实现: 64.js

var byteCharacters;
if (window.atob) {
    byteCharacters = atob(b64Data);
} else {
    byteCharacters =  64.decode(b64Data);
}

3. Blob

Blob也仅支持IE10+,网上有很多polyfill来实现,这里仅作推荐Blob.js

4. Uint8Aray

一个库有很多这方面的支持:其中的typedarray.js,如下部分源码:

...
global.Int8Array = global.Int8Array || Int8Array;
global.Uint8Array = global.Uint8Array || Uint8Array;
global.Uint8ClampedArray = global.Uint8ClampedArray || Uint8ClampedArray;
global.Int16Array = global.Int16Array || Int16Array;
global.Uint16Array = global.Uint16Array || Uint16Array;
global.Int32Array = global.Int32Array || Int32Array;
global.Uint32Array = global.Uint32Array || Uint32Array;
global.Float32Array = global.Float32Array || Float32Array;
global.Float64Array = global.Float64Array || Float64Array;
...

5. 文件下载

推荐一个文件下载库:FileSaver。使用也很简单,比如以下直接引用的方式使用:

<  src=\"../js/FileSaver.min.js\"></ >
< >
...
saveAs(blob, \'hello world.xlsx\'); 
</ >

这个库也仅支持IE10+。

收藏 打印