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. POJ1475 Pushing Boxes 华丽丽的双重BFS

    woc累死了写了两个半小时...就是BFS?我太菜了... 刚开始以为让人预先跑一遍BFS,然后一会儿取两节加起来就好了,结果发现求出来的最短路(就是这个意思)会因箱子的移动而变化....我死了QWQ ...

  2. c++中map的基本函数

    c++中map的一些方法 begin() 返回指向map头部的迭代器     clear() 删除所有元素     count() 返回指定元素出现的次数     empty() 如果map为空则返回 ...

  3. 关于去掉输入一定数字n,在n后写入n个字符串的问题

    在输入数字n后要用一个getchar 去吃掉数字n后面跟着的回车符号,从而保证输入的字符串数是和n是保持一致的 具体实例代码如下: #include<stdio.h> #include&l ...

  4. SPOJ - LOCKER 数论 贪心

    题意:求出\(n\)拆分成若干个数使其连乘最大的值 本题是之江学院网络赛的原题,计算规模大一点,看到EMAXX推荐就做了 忘了大一那会是怎么用均值不等式推出结果的(还给老师系列) 结论倒还记得:贪心分 ...

  5. web 前端提交方式

    1.get提交    如: <a href="actions/Student_Add?name=a&age=8">路径问题说明add</a>< ...

  6. [转] Spring Boot配置多个DataSource

    [From]  https://www.liaoxuefeng.com/article/001484212576147b1f07dc0ab9147a1a97662a0bd270c20000 Sprin ...

  7. Oracle DBMS_UTILITY.GET_HASH_VALUE

    DBMS_UTILITY.GET_HASH_VALUE(input, base, hash_size) 1.DBMS_UTILITY.GET_HASH_VALUE 对于确定的输入字符串,如果base和 ...

  8. [V1-Team] WEDO创意论坛功能规格说明书

    项目功能规格说明书 版本说明 版本 内容 时间 V1.0 描述总体目标,用户使用场景,界面原型.功能设计及验收 2019.3.28 附Github仓库:WEDO 正文 1.目标 规范指导整个项目设计与 ...

  9. scala 中格式化字符常用的格式符

    val name="Fred" val age=20 val weight=150.00 val dd="%s's age is %d,weighs %.2f" ...

  10. TabLayout实现底部导航栏(2)

    TabLayout是android.support.design里的一个控件,使用它可以很方便的做出顶部导航和底部导航.类似于这样的,能设置选中时字体的颜色和选中时的图片. 效果如图: 首先我们在 b ...