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 日期时间函数(经典+完善+实用)
May 27 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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处理多图上传压缩代码功能
2018/06/13 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
js三种排序算法分享
2012/08/16 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
智能钱包:Ekster
2019/11/21 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
副厂长岗位职责
2014/02/02 职场文书
会计的岗位职责
2014/03/15 职场文书
项目建议书怎么写
2014/05/15 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
2015年政风行风工作总结
2015/04/21 职场文书