下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:Thinkguo     来源: https://www.cnblogs.com/thinkguo/p/11281919.html点击数:3867发布时间: 2020-02-28 11:24:36

标签: ExcelvueWindows

Web开发

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

赞(15)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程