vue中axios将table表格数据导出至excel表格

vue中axios将table表格数据导出至excel表格

实现下载excel表格功能(下载后端返回的文件流)

（导出按钮点击事件：将table表格数据导出至excel表格）

<el-button type="primary" @click="exportToExcel">
导出数据</el-button>

第一步：先写接口函数,并返回接口数据

responseType 表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’，默认是‘json’

ArrayBuffer(又称类型化数组)

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

Blob（Binary Large Object）： 二进制大数据对象

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

methods:{
    exportToExcel(){
        var that=this;
        var params={
            apoiId:this.apoiId//传参以id为例
        };
        axios({
        url: '',//引号里面写接口地址
        method: 'post',
        params: data,
        responseType: 'blob',
    }).then((res)=>{
        console.log(res)
    })
    }
}

第二步：写下载文件的函数方法

data(){
return{
    fileName:'数据.xls'
}
}
// 下载文件
downloadFile(res) {
    if (!res) {
        return;
    }
    const blob = new Blob([res.data]); //构造一个Blob来处理数据
    //res为从后台返回的数据
    if (window.navigator.msSaveOrOpenBlob) {
        //IE(这两个方法是IE的方法，只有IE可以调用chrome和Firefox不        可以，所以chrome和Firefox进入else)
        window.navigator.msSaveBlob(blob, this.fileName);
    } else {
        //chrome和Firefox
        const elink = document.createElement('a');//创建a标签
        //通过a标签打开新页面下载文件
        
        //a标签里有download属性可以自定义文件名。
        //dowload属性指定文件名
        elink.download = this.fileName;
        //display = 'none'隐藏元素，这里隐藏<a>标签
        elink.style.display = 'none';
        //创建新的URL表示指定的File对象或者Blob对象
        const objUrl=window.URL.createObjectURL(blob);
        //href属性指定下载链接
        elink.href = objUrl;
        //将上面创建的a元素加入到body的尾部
        document.body.appendChild(elink);
        //click()事件触发下载
        elink.click();
        URL.revokeObjectURL(elink.href);//释放URL
        document.body.removeChild(elink);//释放标签
    }
}

①使用 Blob构造函数可以直接在客户端上创建和操作 Blob（通常等效于一个文件）。Internet Explorer 10 的 msSaveBlob和msSaveOrOpenBlob方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，这是此类文件保存到“下载”文件夹的原因。

请注意，msSaveBlob 和 msSaveOrOpenBlob 之间的区别就在于前者提供“保存”按钮，而后者不但提供“保存”按钮，还提供“打开”按钮。

②为什么IE和chrome、Firefox分开写？

对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性

IE10以上支持blob但是依然不支持download

③在每次调用createObjectURL方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

④download 属性规定被下载的超链接目标。在<a>标签中必须设置 href 属性。该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

⑤Blob问题2：需要导出excel、csv、word、zip压缩文件之类的，在导出excel和word中需要知道对应的content-type属性，关于blob格式如下：

后缀	MIME Type
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt	application/vnd.ms-powerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation

• 具体代码如下：

  const blob = new Blob([res],{type: 'application/vnd.openxmlformats-           officedocument.spreadsheetml.sheet'});

第三步：调用下载文件方法实现下载

 methods:{
    exportToExcel(){
        var that=this;
        var params={
            apoiId:this.apoiId//传参以id为例
        };
        axios({
        url: '',//引号里面写接口地址
        method: 'post',
        params: data,
        responseType: 'blob',
    }).then((res)=>{
        console.log(res)
        //下载文件方法
        that.downloadFile(res);
    })
    }
}

参考链接：

https://www.jianshu.com/p/8d8ea4cbb938vue中axios实现下载excel表格功能(下载后端返回的文件流)_前端探险家的博客-CSDN博客_vue使用axios下载excel