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编写的第一人称射击游戏
Feb 25 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
node.js命令行教程图文详解
May 27 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
javascript数组的扩展实现代码集合
2008/06/01 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
工作表扬信的范文
2014/01/10 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书