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. 分享一个大型进销存供应链项目(多层架构、分布式WCF多服务器部署、微软企业库架构)

    项目源码下载:  WWW.DI81.COM 分享一个大型进销存供应链项目(多层架构.分布式WCF多服务器部署.微软企业库架构) 这是一个比较大型的项目,准备开源了.支持N家门店同时操作.远程WCF+企 ...

  2. Luogu P1273 有线电视网 树形DP

    又重构了一下...当然当初的题一看就看懂了QAQ 设f[i][j]表示以i为根的子树,有j个客户的最大收益 方程:f[u][j+k]=max(f[u][j+k],f[u][j]+f[v][k]-w(u ...

  3. codeforces 1072D Minimum path bfs+剪枝 好题

    题目传送门 题目大意: 给出一幅n*n的字符,从1,1位置走到n,n,会得到一个字符串,你有k次机会改变某一个字符(变成a),求字典序最小的路径. 题解: (先吐槽一句,cf 标签是dfs题????) ...

  4. HDU - 6188

    用vis表贪心异常方便 #include<bits/stdc++.h> #define rep(i,j,k) for(register int i=j;i<=k;i++) #defi ...

  5. Oracle PL/SQL之WITH查询

    [转自] http://blog.csdn.net/t0nsha/article/details/6730855 为什么要用WITH? 1. 如果需要在一段复杂查询里多次应用同一个查询,用WITH可实 ...

  6. PIE SDK打开HDF、NC数据

    1. 功能简介 HDF 是美国国家高级计算应用中心(National Center for Supercomputing Application)为了满足各种领域研究需求而研制的一种能高效存储和分发科 ...

  7. superobject 设定排序方式

    (* * Super Object Toolkit * * Usage allowed under the restrictions of the Lesser GNU General Public ...

  8. linux 运维基础之http协议详解

    引言 这尼玛博客还得自己在这里写,难受一匹本来排版好的...每次都这样嗨....本内容属于借鉴资源,侵权删! HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系 ...

  9. python 爬虫系列06--古诗文

    读书破万卷,下笔如有神 import requests import re def parse_page(url): headers = { 'USer-Agent':'user-agent: Moz ...

  10. (转)2017年最新企业面试题之shell(一,二)

    2017年最新企业面试题之shell(一) ********************************************** 企业Shell面试题1:批量生成随机字符文件名案例 * *** ...