vue使用axios实现excel文件下载的功能

2024-12-04 10:24:21

前端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实现excel文件下载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

业务上出现一个问题:如果连续对同一个接口发出请求,参数不同,有时候先请求的比后请求的返回数据慢,导致数据顺序混乱,或者数据被覆盖的问题,所以需要控制请求的顺序. 解决方法: 1.直接跟后台沟通,将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分使用. 2.对于出现返回的数据混乱问题. 假设场景: 页面中需要对三个部门请求对应的部门人员,三个部门人员的数据为一个二维数组,连续发送请求,但由于返回数据的顺序不定,导致数组中的数据顺序不是按照部门的顺序. 解决方法:使用promise
vue+axios实现文件下载及vue中使用axios的实例

功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了以及返回了文件流. 第二步:修改axios请求的responseType为blob,以post请求为例: axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response =>
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r
vue+axios实现post文件下载

本文实例为大家分享了vue+axios实现post文件下载的具体代码,供大家参考,具体内容如下功能:点击导出按钮,提交请求,下载excel文件: 这里是axios的post方法.get方法请点击这里=>here 第一步:跟后端童鞋确认交付的接口的response header设置了以及返回了文件流. 第二步:修改axios请求的responseType为blob,以post请求为例: axios({ method: 'post', url: 'api/user/', data: { firs
vue实现配置全局访问路径头(axios)

在vue中用axios发送请求的时候总是: axios.get("http://localhost:3000/xxx/xxx",{params:{xx:xxx}}).then(res=>{}).catch(error=>{}) 配置全局的url: 1.安装axios:npm install axios --save-dev 2.main.js: import axios from "axios" axios.defaults.baseURL = &quo
在VUE中实现文件下载并判断状态的方法

新增JS页面 axiosExport.JS // Axios拦截请求并实现下载 import axios from 'axios' // download url export const downloadUrl = (url) => { console.log(url) let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = url iframe.onload = func
vue使用axios实现excel文件下载的功能

前端VUE页面上的导出或者下载功能,一般是调用后端的一个接口,由接口生成excel,word这些文件的流信息,返回给vue,然后由vue去构建下载的动作,这边整理了一下,封装了一下,方便以后复用. 封装一个download文件使用年月日时分秒毫秒做为文件的名称,下载为excel文件 /** * 下载文件 */ export const downloadFile = (url,ext, params) => { let accessToken = getStore('accessToken');
使用Vue+Spring Boot实现Excel上传功能

1.使用Vue-Cli创建前端项目运用vue-cli工具可以很轻松地构建前端项目,当然,使用WebStorm来构建会更加简洁(如图).本文推荐使用WebStorm,因为在后续开发中,IDE会使我们的开发更加简洁.部分配置如图: 2.Navbar编写作为一个WebApp,Navbar作为应用的导航栏是必不可少的.在本项目中,笔者引入了bootstrap对Navbar进行了轻松地构建.在vue中我们需要在components文件夹中将我们的组件加进去,对于本工程来说,Navbar是我们要加入的第
React如何接收excel文件下载导出功能封装

目录 React接收excel文件下载导出功能封装 react导出excel文件的几种方式 1.原生js导出 (带样式) 2.使用xlsx导出(此方法导出的excel文件无样式,但导出的文件格式是 xlsx格式) 3.使用 js-export-excel (可以导出多张sheet表) 4.第四种使用react-html-table-to-excel 不推荐使用 React接收excel文件下载导出功能封装因为最近项目又需求要导出excel,所以封装了这部分的功能,对fetch的封装做了修
vue中后端做Excel导出功能返回数据流前端的处理操作

项目中有一个导出功能的实现,用博客来记录一下.因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来. 先看下效果图: 页面效果: 点击导出Excel 调用导出接口成功了: 后台返回的数据流,一堆看不懂的乱码: 接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出: 虽然vue里有封装好的请求接口的方法,但这里要单独用axios,所以先在util.js里引入axios import
vue使用axios导出后台返回的文件流为excel表格详解

目录使用axios导出后台返回的文件流为excel vue axios导出excel乱码解决使用axios导出后台返回的文件流为excel 之前有一个需求是要使用post请求,导出后台返回的文件流并在表格中使用,大概思路为使用axios请求回数据,定义数据为blob格式,再创建一个a标签自调就可以完成了 <button @click="download">导出</button> data() { return { isClick: tru
axios+Vue实现上传文件显示进度功能

一,前言最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了二,效果三,代码 HTML代码 <div id="app"> <h4>上传文件:</h4> <p class="input-zone"> <span v-if="filename">{{filename}}</span> <span v-else>+请选择文件上传
iview+vue实现导入EXCEL预览功能

本文实例为大家分享了iview+vue实现导入EXCEL预览的具体代码,供大家参考,具体内容如下 Xboot中,前端实现导入EXCEL预览功能 HTML部分  <Drawer title="导入数据" closable v-model="importModalVisible" width="1000"> <div style="
Vue混入mixins分发组件可复用功能

目录前言一.后端返回数据与字典数据之前的转换二.文件下载的混入三.Element表格最后一行合计数据的混入前言那就是说,你可以单独写个逻辑文件,默认导出一个对象,对象里面可以包含data.created.mounted.methods 等vue模板文件中的逻辑对象.接着可以将这个对象引入到多个vue模板中进行功能复用,从而达到功能模块的逻辑封装,便于使用及后期维护. 这里我举一些日常开发中最常用的示例来说,更多的是 methods 的混入. 一.后端返回数据与字典数据之前的转换通常
Vue.js仿微信聊天窗口展示组件功能

源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍支持文本和图片的展示(后续将

vue使用axios实现excel文件下载的功能

相关推荐

随机推荐