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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
JS 数组基本用法入门示例解析
Jan 16 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
基于empty函数的输出详解
2013/06/17 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
档案接收函
2014/01/13 职场文书
中职生求职信
2014/07/01 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB