web前端：vue项目中导出Excel文件功能的前端代码实现

作者:Thinkguo更新于： 2020-02-28 11:24:29

　　Microsoft Excel是微软公司的办公软件MicrosoftOffice的组件之一，是由Microsoft为Windows和AppleMacintosh操作系统的电脑而编写和运行的一款试算表软件。

　　在项目中遇到了两种不同情况，

　　1、get请求导出文件，实现起来相对简单

　　//导出数据

　　exportData(){

　　window.location.href=`/oes-content-manage/role/export-roles?size=${this.totalCount}&sidx=roleName&sord=desc&roleId=${this.searchForm.roleId}`;

　　},

　　直接把要传递的参数拼接在请求地址url后面即可

　　2、post请求方式

　　//查询结果导出

　　exportResult(){

　　letkey;

　　letparam={};

　　for(keyinthis.exportParam){

　　if(key=='page'||key=='rows'){

　　continue;

　　}else{

　　param[key]=this.exportParam[key]

　　}

　　}

　　exportexcl(param).then(res=>{

　　varblob=newBlob([res.data],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});//application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型

　　vardownloadElement=document.createElement('a');

　　varhref=window.URL.createObjectURL(blob);//创建下载的链接

　　downloadElement.href=href;

　　downloadElement.download='导出数据.xlsx';//下载后文件名

　　document.body.appendChild(downloadElement);

　　downloadElement.click();//点击下载

　　document.body.removeChild(downloadElement);//下载完成移除元素

　　window.URL.revokeObjectURL(href);//释放掉blob对象

　　})

　　},

　　这种方式用于传递参数比较多的情况，在这个项目中所传递参数达到了三四十个。

　　同时不要忘记在接口加上responseType属性。

　　//查询结果导出

　　exportfunctionexportexcl(params){

　　returnaxiOS.post(servers+'/program/export',params,{

　　responseType:'blob'

　　});

　　}

　　Excel是微软办公套装软件的一个重要的组成部分，它可以进行各种数据的处理、统计分析和辅助决策操作，广泛地应用于管理、统计财经、金融等众多领域。