JS下载文件两种方式总结：

下载文件主要分为两种形式，具体使用哪种方式取决于后台；

1.如果后台服务器的静态目录有可供下载的静态资源，后台接口返回文件路径，直接window.location.href=url或者window.open(url)或者创建a标签并指定a.href=url模拟点击进行下载即可；

2.如果后台服务器无可供下载的静态资源，返回的是一个文件流(response-type: application/octet-stream;charset=UTF-8 )，则使用第二种方式(将文件写入内存，并且创建a元素，a链接href属性指向内存中的文件，download属性指向要下载的文件名，模拟a元素的点击事件进行下载然后移除a元素)。

本文主要说明采用文件流的方式下载文件。

一、后台服务器有静态资源且是固定的文件名(GET方式下载文件)

window.location.href="http://www.域名/template.xlsx(请求返回的url地址)"

二、后台返回文件流

方案1：采用FileReader读取二进制流，下载读取后的结果

import axios from 'axios'

axios.post(this.$globalConf.atapPathPrefix + '/system/indicator/export', postParams, { responseType: 'blob' }).then(res => {

let blob = res.data;

let reader = new FileReader();

reader.readAsDataURL(blob);

reader.onload = function(e) {

let a = document.createElement('a');

let fileName = res.headers["content-disposition"] ? res.headers["content-disposition"].split(';')[1].split('=')[1] : new Date().getTime() + '.xlsx'

a.download = decodeURIComponent(fileName)//解码

a.href = e.target.result;

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

}

})

方案二：通过URL.createObjectURL读取二进制流并返回一个对象URL，原理同上

import axios from 'axios'

axios.post(this.$globalConf.atapPathPrefix + '/system/indicator/export', postParams, { responseType: 'blob' }).then(res => {

//这里res.data是返回的blob对象,即对应的二进制流

let blob = res.data

let downloadElement = document.createElement('a');

let href = window.URL.createObjectURL(blob); //创建下载的链接

let fileName = res.headers["content-disposition"] ? res.headers["content-disposition"].split(';')[1].split('=')[1] : new Date().getTime() + '.xlsx'

downloadElement.href = href;

downloadElement.download = decodeURIComponent(fileName)//解码

document.body.appendChild(downloadElement);

downloadElement.click();

document.body.removeChild(downloadElement);

window.URL.revokeObjectURL(href); //释放掉blob对象

})

可能出现的问题：

无法获取headers的content-disposition字段

本次请求获取到fileName如下：

image.png

解决办法

在服务端设置header

Access-Control-Expose-Headers: Content-Disposition

(3)Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。