前端通过blob导出数据为excel，导出文件大小不受2m限制

不bb，先上代码

$http({
                   method: 'GET',
                   url: apiUrl,
                   dataType: 'json',
                   async: true,
                   headers: {
                       'client_id': clientId,
                       'access_token': $scope.token,
                       'accountid': $scope.accountid
                   },
                   responseType: 'blob'
               }).then(function successCallback(data) {
                   var blob = data.data;
                   //var reader = new FileReader(); 之前我使用的是FileReader的方法，该方法只能导出2m以内的excel文件
                   //reader.readAsDataURL(blob);
                   var blobURL = window.webkitURL.createObjectURL(blob); //新找到的方法，实测不受起码5m以内的限制,理论上不受大小限制

                   var a = document.createElement('a');
                   a.download = filename;
                   a.href = blobURL;
                   a.id = 'exportLink';

$("body").append(a);
a.click();

$(a).remove();
// 创建一个a标签用于下载
});

先来看看readAsDataURL这个方法

HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

我大胆猜想一定是FileReader 出了问题，他的能力有限，遇到大量数据不足以担此大任

再对比一下新方法

返回值
- FileReader.readAsDataURL(file)可以得到一段base64的字符串。
- URL.createObjectURL(file)可以得到当前文件的一个内存URL。
内存使用
- FileReader.readAsDataURL(file)的返回值是转化后的超长base64字符串(长度与要解析的文件大小正相关)。
- URL.createObjectURL(file)的返回值虽然是字符串，但是是一个url地址。
内存清理
- FileReader.readAsDataURL(file)依照JS垃圾回收机制自动从内存中清理。
- URL.createObjectURL(file)存在于当前doucment内，清除方式只有unload()事件或revokeObjectURL()手动清除。
执行机制
- FileReader.readAsDataURL(file)通过回调的形式返回，异步执行。
- URL.createObjectURL(file)直接返回，同步执行。
兼容性
- 兼容性兼容IE10以上，其他浏览器均支持。
其他
- FileReader.readAsDataURL(file)当多个文件同时处理时，需要每一个文件对应一个新的FileReader对象。
- URL.createObjectURL(file)依次返回无影响。

总体来说

URL.createObjectURL(file)得到本地内存容器的URL地址，方便预览，多次使用需要注意手动释放内存的问题，性能优秀。
FileReader.readAsDataURL(file)胜在直接转为base64格式，可以直接用于业务，无需二次转换格式。

此处借鉴了果园园园园的对比原链接：https://www.jianshu.com/p/69c57e60c525

轮子很好用但是还是要加强对原生方法的掌握和了解啊，同志们，诸君皆当勉励之

前端通过blob导出数据为excel，导出文件大小不受2m限制