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 相关文章推荐
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
一个手写的vue放大镜效果
Aug 09 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
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python登录注册验证功能实现
2018/06/18 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Python函数基本使用原理详解
2020/03/19 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
银行实习生的自我评价
2014/01/13 职场文书
结婚周年感言
2014/02/24 职场文书
企业出纳岗位职责
2014/03/12 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
撤诉申请书法院范本
2015/05/18 职场文书