首先说明一下，在文件下载这边踩了个坑，花了好长时间才解决！！！就是后台给的接口返回的是一个二进制文件流，但是前端请求返回的结果将二进制文件流改成了字符串，所以导致下载一直不成功。

        后期发现是mock.js影响到了，所以在main.js中将mock注释掉就立马可以下载了。当然我项目用的是vue-element-admin框架。

        如果你遇到文件下载不成功，且有使用mock.js的话，赶紧长点心，不然真的累死都不知道为啥一直下载不成功。

         接下来开始步入正题，我下面零零碎碎有好几种下载下载方法，大家可以根据自己的意愿选择下载方法。

        一、使用window.open()下载

        这种方法最简单，就是后台给你直接提供一个下载地址，直接window.open(url)进行下载就可以了。

        当然我是在js中封装了一个公共的方法，在需要的页面导入使用即可，代码如下：

/**
* 下载文件(公共方法)
* @param response 文件地址
*/
export function handleDownloadUrl(response) {window.open('/fileUpload/' + response)
}

// vue页面导入方法
import { handleDownloadUrl } from '@/utils/download';

/**
* vue页面下载调用
* */
handleDownload(row) {this.$confirmBox('确定下载文件？', '提示').then(() => {handleDownloadUrl(row.url) // 调用下载}).catch(() => {})
},

        二、创建a标签下载

        通过创建a标签的方式，实现文件的下载

axios({url: '/export/userPort',data: {id: this.temp.id, all: this.temp.all},method: 'post',responseType: 'blob',headers: {'Authorization': getToken()}
}).then((response) => {// 下载文件const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })const objectUrl = URL.createObjectURL(blob) // 创建URLconst link = document.createElement('a')link.href = objectUrl// 这里是获取后台传过来的文件名link.setAttribute('download', 'xxx.xlsx')link.click() // 下载文件URL.revokeObjectURL(objectUrl) // 释放内存
}).catch((error) => {console.log(error);
})

        三、使用js-file-download下载

        这个方法是一个现成的下载组件，使用之前要先安装，在导入，然后跟方法二一样，接口调用成功后，调用方法fileDownload即可。

npm install js-file-download --save // 安装

import fileDownload from 'js-file-download' // 导入

axios({url: '/export/userPort',data: {id: this.temp.id, all: this.temp.all},method: 'post',responseType: 'blob',headers: {'Authorization': getToken()}
}).then((response) => {fileDownload(response.data, 'xxx.xls') // 接口调用成功时下载
}).catch((error) => {console.log(error);
})