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学习笔记之获取当前目录的实现代码
Dec 14 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
JS中substring与substr的用法
Nov 16 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
使用JS实现动态时钟
Mar 12 Javascript
vue中实现图片压缩 file文件的方法
May 28 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
js实现iframe动态调整高度的代码
2008/01/06 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
python中zip和unzip数据的方法
2015/05/27 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
大学毕业感言100字
2014/02/03 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
授权委托书怎么写
2014/09/25 职场文书
实习单位指导教师评语
2014/12/30 职场文书
环境建议书
2015/02/04 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书