vue使用axios实现excel文件下载的功能


Posted in Javascript onJuly 16, 2020

前端VUE页面上的导出或者下载功能,一般是调用后端的一个接口,由接口生成excel,word这些文件的流信息,返回给vue,然后由vue去构建下载的动作,这边整理了一下,封装了一下,方便以后复用。

封装一个download文件

使用年月日时分秒毫秒做为文件的名称,下载为excel文件

/**
 * 下载文件
 */
export const downloadFile = (url,ext, params) => {
  let accessToken = getStore('accessToken');
  return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params,
    headers: {
      'accessToken': accessToken
    },
    responseType: 'blob', //二进制流
  }).then(res => {
    // 处理返回的文件流
    const content = res;
    const blob = new Blob([content], { type: 'application/vnd.ms-excel;charset=utf-8' });
    var date =
      new Date().getFullYear() +
      "" +
      (new Date().getMonth() + 1) +
      "" +
      new Date().getDate() +
      "" +
      new Date().getHours() +
      "" +
      new Date().getMinutes() +
      "" +
      new Date().getSeconds() +
      "" +
      new Date().getMilliseconds();
    const fileName = date + "." + ext;
    if ("download" in document.createElement("a")) {
      // 非IE下载
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName);
    }
  });
};

为具体功能封装一个组件,方便在前台调用

// 评价导出
export const getRecordExport= (params) => {
  return downloadFile('/record/export',"xlsx", params)
}

vue页面上调用它,实现导出

<script>
import {
 getReportExport
} from "@/api/index";
import util from "@/libs/util.js";

export default {
 name: "task-manage",
 data() {},
 methods: {
  exportExcel() {
   getReportExport(this.searchForm).then(res=>{});
  }
 }
}

截图

vue使用axios实现excel文件下载的功能

到此这篇关于vue使用axios实现excel文件下载的功能的文章就介绍到这了,更多相关vue实现excel文件下载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
jquery form 加载数据示例
Apr 21 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
javascript实现的简单计时器
Jul 19 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
vue实现自定义多选按钮
Jul 16 #Javascript
vue实现div单选多选功能
Jul 16 #Javascript
vue+AI智能机器人回复功能实现
Jul 16 #Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 #Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 #Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 #Javascript
详解js中的几种常用设计模式
Jul 16 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
JavaScript实现滚动加载更多
2020/12/27 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
flask应用部署到服务器的方法
2019/07/12 Python
python实现四人制扑克牌游戏
2020/04/22 Python
基于python检查矩阵计算结果
2020/05/21 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
宠物店的创业计划书范文
2014/01/11 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
会计专业导师推荐信
2014/03/08 职场文书
政风行风建设整改方案
2014/10/27 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
工程进度款催款函
2015/06/24 职场文书