Vue使用Blob对象进行Excel文件下载

一、Blob对象

1.介绍

Binary Large Object的缩写，代表二进制类型的大对象。在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blob。

使用

通过Blob的构造函数创建Blob对象
Blob(blobParts[, options])
blobParts 数组类型，数组中元素可以是ArrayBuffer，ArrayBufferView,Blob,DOMString等。
options:可选参数，字典格式类型。

二、文件下载-Excel为例

1.引入excel处理xlsx.core.min.js(最好下载js文件到本地，避免网络问题)

<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>

2.下载数据准备

downLoad() {
    //测试数据
     let excelData = {
         [
             "name","zs",
             "age","18",
             "sex","男",
         ], [
             "name","ls",
             "age","19",
             "sex","男",
         ], [
             "name","zl",
             "age","22",
             "sex","女",
         ],
     } 
    //将json文件转为Excel（通过xlsx.core.min.js）
    let sheet = XLSX.utils.json_to_sheet(excelData);
    //下载文件名称
    let fileName = 'tets.xlsx';
    //调用getDownLoadData函数进行下载功能
    //translateSheetToBlob()函数用来将sheet转为excel文件的Blob对象
    this.getDownLoadData(this.translateSheetToBlob(sheet), fileName);
},
//translateSheetToBlob()函数用来将sheet转为excel文件的Blob对象
translateSheetToBlob(sheet, sheetName){
    sheetName = sheetName || 'sheet1';
    //workbook 对象，指的是整份 Excel 文档。
    var workbook = {
        SheetNames: [sheetName], //sheet表名称
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet; //文件内容
    // 生成excel的配置项 
    var wopts = {
       bookType: 'xlsx', // 要生成的文件类型 
       bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
       type: 'binary'
   }
    //写入excel
    var wbout = XLSX.write(workbook, wopts);
    //将sheet类型转为blob对象
    var blob = new Blob([sheetArray(wbout)], {
        type: "application/octet-stream"
    });
    // 字符串转ArrayBuffer
    function sheetArray(s) {
        var buffer = new ArrayBuffer(s.length);
        var view = new Uint8Array(buffer);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buffer;
    }
    return blob;
}
//文件下载
getDownLoadData(blob,fileName){
    //获取blob对象的地址
    if (typeof url == 'object' && url instanceof Blob) {
        //通过URL.createObjectURL(blob)创建 blob url
        url = URL.createObjectURL(blob);
    }
    //创建a标签
    var aLink = document.createElement('a');
    //绑定下载链接
    aLink.href = url;
    // HTML5新增的属性，指定保存文件名
    aLink.download = fileName || ''; 
    //点击下载
    aLink.click();
    //释放内存资源
    URL.revokeObjectURL(aLink.href);
}

三、部分函数调用说明

1.document.createElement()的用法
    //说明：createElement() 方法可创建元素节点，此方法可返回一个 Element 对象。
    document.createElement(a) 创建一个a标签

2.URL.createObjectURL(blob)
    URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
    这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL对象表示指定的 File 对象或 Blob 对象。