前端通过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 出了问题，他的能力有限，遇到大量数据不足以担此大任

再对比一下新方法

1. 返回值

   • FileReader.readAsDataURL(file)可以得到一段base64的字符串。
   • URL.createObjectURL(file)可以得到当前文件的一个内存URL。

2. 内存使用

   • FileReader.readAsDataURL(file)的返回值是转化后的超长base64字符串(长度与要解析的文件大小正相关)。
   • URL.createObjectURL(file)的返回值虽然是字符串，但是是一个url地址。

3. 内存清理

   • FileReader.readAsDataURL(file)依照JS垃圾回收机制自动从内存中清理。
   • URL.createObjectURL(file)存在于当前doucment内，清除方式只有unload()事件或revokeObjectURL()手动清除 。

4. 执行机制

   • FileReader.readAsDataURL(file)通过回调的形式返回，异步执行。
   • URL.createObjectURL(file)直接返回，同步执行。

5. 兼容性

   • 兼容性兼容IE10以上，其他浏览器均支持。

6. 其他

   • FileReader.readAsDataURL(file)当多个文件同时处理时，需要每一个文件对应一个新的FileReader对象。

      

   • URL.createObjectURL(file)依次返回无影响。

---

总体来说

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

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

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