根据后端返回的文件流下载文件

方法一：

import axios from 'axios'
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL:"http://localhost:3000",
  // 超时
  timeout:2000
})
 
// 拦截器
......
......
 
//导出方法
/*
download(url, params, filename)
第一个参数是请求的api
第二个参数是请求参数
第三个参数是导出的文件名
*/
export function download(url, params, filename) {
   //数据请求
  return service.post(url, params, {
    transformRequest: [(params) => {
      return tansParams(params)
    }],
  // 请求头
    headers: {
      'xxx': 'xxx'
    },
    responseType: 'blob'
  }).then((data) => {
    const content = data
    const blob = new Blob([content], {
    // 下载的文件格式自己在这边更改type的值就好了
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    if ('download' in document.createElement('a')) {
      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)
      document.body.removeChild(elink)
    } else {
      navigator.msSaveBlob(blob, filename)
    }
  }).catch((r) => {
    console.error(r)
  })
}

方法二：

1、通过后端给的文件地址下载
window.location.href=URL
window.open(URL)

区别：
window.location：当前页跳转，也就是重新定位当前页；只能在网站中打开本网站的网页。

window.open：在新窗口中打开链接；可以在网站上打开另外一个网站的地址

方法三：

2、通过 js-file-download 插件

npm install js-file-download --S

import fileDownload from 'js-file-download'
  
axios.get(`downLoadExcel/template`, {
   responseType: 'blob' //返回的数据类型
})
.then(res => {
   fileDownload(res.data, this.fileName)
})

方法四：

3、使用fetch下载

downFile() {
    fetch('http://10.190.156.103:3000/api/deviceList/downLoadExcel', {
        method: 'GET',
        headers: new Headers({
            'Authorization': Cookie.get('Authorization') 
        }),
    })
   .then(res => res.blob())
   .then(data => {
        const blobUrl = window.URL.createObjectURL(data);
        const a = document.createElement('a');
        a.download = this.fileName+'.xlsx';
        a.href = blobUrl;
        a.click();
	});
},

方法五：

4、vue通过 a 标签的 download 属性结合 blob 构造函数下载excel文件

export function aoiTemplateExport() {
  return request({
    url: '',
    method: 'get',
    responseType: 'blob'
  })
}


download() {
      aoiTemplateExport().then((res) => {
        const url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '数据模板.xlsx')
        document.body.appendChild(link)
        link.click()
      })
  }


实际操作过：

downloads() {
  deviceTemplate().then((res) => {
    const blob = new Blob([res], {type: 'application/vnd.ms-excel'});// 构造一个blob对象来处理数据，并设置文件类型
    const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
    const a = document.createElement('a') //创建a标签
    a.style.display = 'none'//隐藏
    a.href = href // 指定下载链接
    a.download = '导入模板.xlsx' //指定下载文件名
    a.click() //触发下载
    URL.revokeObjectURL(a.href) //释放URL对象
  })
},

avascript
//云附件 文件流链接
function clouddownloadResources(id,title) {
	common.showLoading()
	api_enclosuredetail.clouddownloadResource('',id).then(function(res) {
		if(res.code == 0){			
			common.hideLoading();
			downloadResource(res.data.url, title)   -----文件流链接
		}else{
			common.hideLoading();
		}
	})
}
	
function getBlob(url, callback) {
    const xhr = new XMLHttpRequest();
    url = url ;//不加后面的随机数+ "?r=" + Math.random()	// 避免 200 from disk cache
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
        if (xhr.status === 200) {
            callback(xhr.response);
        }
    }
    xhr.send();
}
function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
    } else {
        const anchor = document.createElement('a');
        const body = document.querySelector('body');
        anchor.href = window.URL.createObjectURL(blob);
        anchor.download = filename;
        anchor.style.display = 'none';
        body.appendChild(anchor);
        anchor.click();
        body.removeChild(anchor);
        window.URL.revokeObjectURL(anchor.href);
    }
}
function downloadResource(url, newFileName) {
    getBlob(url, function (res) {
        saveAs(res, newFileName);
		$('[data-role="download"]').css({"pointer-events": "auto"});
		$('[data-role="download"]').html('立即下载')
    })
}

window.open(“http://www.w3schools.com”,”_blank”)