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 22 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
详解参数传递四种形式
Jul 21 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 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开发留言板功能
2019/11/19 PHP
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
微信小程序image图片加载完成监听
2019/08/31 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
Python验证码识别处理实例
2015/12/28 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python登录注册验证功能实现
2018/06/18 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
职业生涯规划书结束语
2014/04/15 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
入党函调证明材料
2014/12/24 职场文书
阿凡达观后感
2015/06/10 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Python一行代码实现自动发邮件功能
2021/05/30 Python
新手入门Mysql--概念
2021/06/18 MySQL
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL