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

时间: 2020-07-03阅读: 598标签: axios

前端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=>{});
    }
 }
}

原文:https://www.cnblogs.com/lori/p/13322246.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/9481

axios请求失败自动重发

一般而言只要谈到异步,通常提到回调函数。JS里的Promise是一个强大的回调函数管理器。本文的实现方案正是利用了Promise的特性,在接口无权限时

axios基于常见业务场景的二次封装

axios的二次封装,功能实现:1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环境变量4.全局loading状态5.可关闭的全局错误提醒6.可开启携带全局分页参数

axios处理Http请求的基本使用方法总汇

axios的功能特性:在浏览器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求,支持 Promise API,拦截请求和响应,转换请求和响应数据,自动转换 JSON 数据,客户端支持保护安全免受 XSRF 攻击

axios表单格式请求后端报错Bad Request

开始没有使用Qs库,能获取到列表数据,但是添加项目等需要传请求参数的情况下,使用表单的传参方式就不能成功请求,就报错。报错如下:

axios 拦截器显示和关闭Loading

使用Loading分为2种情况,第一种是使用一些组件库自带的loading,另一种是使用我们自己写的loading,现分开介绍使用方法。使用element ui 带的Loading

vue axios不缓存get请求(防止返回304不更新数据)

最近做项目遇到一款浏览器,由于缓存了get请求,导致不管如何刷新,数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数,value为时间戳

必然会用到的 axios 中自带的工具方法

在 axios 中,使用到了很多基础的工具方法,这些方法我们也可以提炼下,看是否能应用到我们自己的实际项目中,所谓的绝对链接指的是有协议的链接

怎样在vue项目中使用axios处理接口请求

vue项目中使用axios处理后端接口请求,在main.js中全局引入axios,因为axios不是为了vue写的插件(插件内要处理)不支持vue.use()加载方式,为方便使用,可以将其挂载在vue原型上;全局使用this.$axios

axios统一接口管理及优化

根据在项目的使用,发现有以下问题需要优化:withAxios导出的接口方法对象对编辑器来说是不透明的,所以代码提示功能缺失。同一个方法调用多次,如何保证组件总是获取到最后一次的返回信息。

axios的特点与使用_解决处理axios兼容性问题

axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。项目中发现,在安卓4.3及以下的手机不支持axios的使用,主要就是无法使用promise。加上以下polyfill就可以了。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!