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.createObjectURL(blob);
a.click();

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

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

2. atob/btoa

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

var byteCharacters;
if (window.atob) {
byteCharacters = atob(b64Data);
} else {
byteCharacters = Base64.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。使用也很简单,比如以下直接引用的方式使用:

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

这个库也仅支持IE10+。

Blob, Uint8Aray, atob/btoa in lt IE9 browser的更多相关文章

  1. Javascript 中 atob/btoa

    解决 Javascript 中 atob 方法解码中文字符乱码问题 由于一些网络通讯协议的限制,你必须使用 window.btoa() 方法对原数据进行编码后,才能进行发送.接收方使用相当于 wind ...

  2. WebBrowser与IE的关系,如何设置WebBrowser工作在IE9模式下?

    原文 WebBrowser与IE的关系,如何设置WebBrowser工作在IE9模式下? 一.问题的提出 偶然发现,Winform里的WebBrowser和IE实际安装的版本似乎并不同步,很有趣! 下 ...

  3. JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

    JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...

  4. Vue导出json数据到Excel表格

    一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...

  5. 【vue】vue中实现导出excel

    1.安装依赖 cnpm install -S file-saver xlsx cnpm install -D script-loader 2.例如在src文件夹中新建一个名为vendor(vendor ...

  6. [JavaScript]为JS处理二进制数据提供可能性的WEB API

    写这篇博客的起源是在div.io上的一篇文章<你所不知道的JavaScript数组>by 小胡子哥下的评论中的讨论. 因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那 ...

  7. vue中使用导出表格功能

    1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...

  8. vue导出excel数据表格功能

    前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来. 第一步安装依赖包,需要把代码下载你的项目当中 cnpm install  file-saver c ...

  9. BASE64转文件下载

    你可以用HTML 5 注意:返回的文件数据必须是base 64编码的,因为您不能对二进制数据进行JSON编码 在我的AJAX我得到了如下的数据结构: <!DOCTYPE html> < ...

随机推荐

  1. stopPropagation / stopImmediatePropagation

      stopPropagation()只会阻止冒泡或者是捕获. stopImmediatePropagation()会阻止该元素的其他事件发生,但是stopPropagation就不会阻止其他事件的发 ...

  2. archlinux安装交叉编译工具链

    1. 在/usr/local下新建文件夹:arm  [guo@archlinux local]$sudo mkdir arm 2. 将交叉编译工具拷贝到arm文件夹中  [guo@archlinux ...

  3. kvm 虚拟网络命令操作

    2018-11-06 ```使用brctl命令创建网桥br1```# brctl addbr br1``` 删除网桥br1```# brctl delbr br1``` 将eth0端口加入网桥br1  ...

  4. QWebView使用

      问题: 开始编译的时候在pro文件中要加上 QT += core gui webkitwidgets 文件使用部分加上 #include<QtWebKitWidgets/QWebView&g ...

  5. MySQL Flashback 闪回功能详解

    1. 简介 mysqlbinlog flashback(闪回)用于快速恢复由于误操作丢失的数据.在DBA误操作时,可以把数据库恢复到以前某个时间点(或者说某个binlog的某个pos).比如忘了带wh ...

  6. oracle 日志文件

    --Oracel Grid 11.2的Agent有多个,其中有两个最重要:orarootagent.oraagent --它们有各自的日志文件,这些Agent的日志文件位于: $grid_home/l ...

  7. 防盗链与springboot代理模式(图片文件转发)

    在搭建自己的博客网站的时候,很有可能要引入一些外部图片,毕竟多数人最开始不是在自己的平台上写博客. 因某种需要,搬运自己以前写的博客到自己的网站时,在图片这一步可能会出现问题,无法显示.其中往往就是防 ...

  8. 【计算机网络】SSL交互和握手过程

    SSL消息按如下顺序发送:  1.Client Hello  客户发送服务器信息,包括它所支持的密码组.密码组中有密码算法和钥匙大小: 2.Server Hello  服务器选择客户和服务器都支持的密 ...

  9. 九度oj题目1012:畅通工程

    题目1012:畅通工程 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6643 解决:2863 题目描述: 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇. ...

  10. CentOS 下 安装 nginx

    1.准备 安装 nginx 之前,需要确认是否安装了 GCC,PCRE, zlib, OpenSSL 等. 如未安装,则先安装这些插件 # yum install -y gcc # yum insta ...