axios下载excel文件

原创 2018年04月17日 21:41:12

html下载文件

最简单的方式莫过于使用a标签赋予href下载,或者是window.open,但是却无法执行post请求、以及在request.headers中放置内容,以下提供一种方式,基于axios

import axios from 'axios'

axios.interceptors.response.use(
    response => {
        if(response.config && response.config.responseType == 'blob') {
            const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
            let filename = 'excel.xls';
            if ('download' in document.createElement('a')) {
                const downloadElement = document.createElement('a');
                let href = ''; 
                if(window.URL) href = window.URL.createObjectURL(blob); 
                else href = window.webkitURL.createObjectURL(blob); 
               downloadElement.href = href;
               downloadElement.download = filename; 
               document.body.appendChild(downloadElement);
               downloadElement.click(); 
               if(window.URL) window.URL.revokeObjectURL(href); 
                else window.webkitURL.revokeObjectURL(href); 
                document.body.removeChild(downloadElement);
            } else {
                navigator.msSaveBlob(blob, filename);
            }
            return;

        }
        return Promise.resolve(response.data);
        /* const { status, config } = response;
        const { onlyHandleSuccess } = config;
        if(!onlyHandleSuccess) return Promise.resolve(response.data);
        else {
            const { success, data, errorCode, errorMsg } = response.data;
            if(success) return Promise.resolve(data);
            else ElementUI.Message.error(errorMsg);
        } */

        /* if(status >= 200 && status < 300) {
            return Promise.resolve(data);
        }
        return Promise.reject(response); */
    },
    error => {
        const { response } = error;
        let message = '异常', status;
        if(!response) message = '请求超时...';
        else {
            message = response.statusText;
            status = response.status;
        }
        return Promise.reject({ message, status });
    }
)

const defaultConfig = {
    baseURL: '',
    mode: 'cors',    
    headers: {
        "your-content": 'test....',
        "Accept": "application/json",   
        "Content-Type": "application/json;charset=utf-8"
    }, 
    responseType: 'json'
    //onlyHandleSuccess: true
}

axios.defaults.timeout = 30000

export const post = (url, data, config) => {
    return axios.post(url, data, Object.assign({}, defaultConfig, config))
}

//demo,请求地址需要返回文件流
post('your/download/path', { data: 1 }, { responseType: 'blob' });
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013224660/article/details/79981350

VUE的axios实现excel导出下载功能

//添加axios拦截器 axios.interceptors.response.use(function(res){ if (res.headers &amp;amp;&amp;amp; (re...
  • qqllife
  • qqllife
  • 2018-02-23 17:03:33
  • 310

post请求下载excel文档解决方法

post请求无法直接发送请求下载excel文档,是因为我们在后台改变了响应头的内容: Content-Type: application/vnd.ms-excel 导致post请求无法识别这种消息...
  • Sunny__wei
  • Sunny__wei
  • 2017-04-17 17:45:28
  • 3519

vue2.x 获取流文件乱码问题,以及下载的文件名变更

这个方式存在浏览器兼容问题!!! 参考博文:vue2.x 下载后台传过来的流文件(excel)后乱码问题 变更下载文件名: toExcelExport(){ this.$a...
  • thinkcis9
  • thinkcis9
  • 2018-01-08 14:24:35
  • 538

前端 下载excel文件

前端 下载excel文件 最简单的形式, 前端正常请求,后端返回一个静态文件链接,使用a标签的download方法 代码实现: var a = document.getElementById('ali...
  • mnhn456
  • mnhn456
  • 2017-12-25 19:54:46
  • 275

vue.js 使用axios实现下载功能

本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦只好回答一下axios如何拦截get请求并下载文件的了。Ajax无法下载文件的原因浏览器的GET(frame...
  • seanxwq
  • seanxwq
  • 2018-01-04 21:32:09
  • 2853

axios离线文件

  • 2017年09月12日 16:46
  • 12KB
  • 下载

发送post请求下载文件

发送post请求下载文件先说一下背景:这是一个以vue作为框架并用Axios来发送http请求的项目。我想要实现用axios来发送post请求,然后服务器会返回的response是一个文件流,我希望能...
  • yunlala_
  • yunlala_
  • 2017-10-29 16:02:25
  • 5638

axios用法

1. 设置默认头信息 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' 2...
  • qq_36207983
  • qq_36207983
  • 2017-12-23 18:10:05
  • 791

VUE 更好的 ajax 上传处理 axios.js

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。 首先就是引入axios,如果你使用es6,只需要安装ax...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-25 19:44:12
  • 9283

axios 封装上传文件的请求

    axios 和 ajax 都支持异步请求,两者使用方法大同小异,在此使用 axios 上传文件的请求。使用的时候只需要在响应的 vue 组件中引入就可以。import Vue from 'vu...
  • nimoyaoww
  • nimoyaoww
  • 2018-02-28 15:41:58
  • 193
收藏助手
不良信息举报
您举报文章:axios下载excel文件
举报原因:
原因补充:

(最多只允许输入30个字)