背景：
在项目开发中，遇到需要下载文件的情况，文件类型可能是图片、excell表、pdf、zip等文件类型，但浏览器会阻止不安全的下载链接。
效果展示：
下载文件的两种方式：
一、根据接口的相对url，拼接成完整路径下载
这串完整的下载路径是：
开发预留
在浏览器访问，图片如下：
结果分析：
直接在浏览器就可以直接访问，可见这个文件没有加密，是不安全的。
还有一个原因是实际情况，根据接口的url直接下载的。另外一种导出下载，是发起网络请求的，接收后台传给前端的二进制流之前需要先设置responseType为blob，否则默认会以json获取，下载下来的文件打开会提示文件已损坏。是发起网络请求的，并且后端接口返回的response头的content-type也是对应的类型，我的这里是application/vnd.ms-excel;charset=UTF-8。
二、网络接口，导出excell表格
实现效果：
导出接口：
这个接口返回的数据在控制台打印：
备注：控制台输出的可以看到是个正确的Blob对象，这就说明我们的配置是对的。
实现思路【重点】：
导出接口传参给后端，后端对请求到的数据经过后端拼接，然后输出二进制流文件，然后给前端返回，前端直接下载。
需要注意几点：
1.前端请求需要携带请求体，config里面要带上responseType: 'blob'。举例：
//导出文件【渡船管理】
exportCrewInfoFile(params) {
return request.Get("/data/ferryShip/download?", params, {
headers: {
"Content-Type": "application/json",
},
responseType: 'blob',
});
},
所以我们接收后台传给前端的二进制流之前需要先设置responseType为blob，否则默认会以json获取，下载下来的文件打开会提示文件已损坏。
2.后端最好也要配置response头的content-type为对应的类型。
3.需要给这个Blob对象设置一个type，这个type表明改Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。例如：type: "application/vnd.ms-excel",
/**
*
* @param {*} res 接口返回的文件流
*/
export const dowloadFileUrl = (res) => {
console.log(res)
const fileNames = res.headers['content-disposition']
if (fileNames) {
//解码
const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1])
// 处理返回的文件流
const content = res.data
const blob = new Blob([content], {
// type: res.data.type||"application/vnd.ms-excel",
type: res.data.type||"application/octet-stream; charset=utf-8"
});
if ('download' in document.createElement('a')) {
//非IE下载
const a = document.createElement('a') //创建一个a标签
a.download = fileName //指定文件名称
a.style.display = 'none' //页面隐藏
a.href = URL.createObjectURL(blob) // href用于下载地址
document.body.appendChild(a) //插到页面上
a.click() //通过点击触发
URL.revokeObjectURL(a.href) //释放URL 对象
document.body.removeChild(a) //删掉a标签
} else {
//IE10 + 下载
navigator.msSaveBlob(blob, fileName)
}
}
}
三、下载文件的两种方式的对比
实现代码：
代码1：
if (!data.file) {ElMessage.error("文件不存在！");return;}const url = BASEUrl + "/file/" + data.file;//拼接下载地址const a = document.createElement("a"); //创建一个a标签a.download = data.name; //指定文件名称a.style.display = "none"; //页面隐藏a.href = url; // href用于下载地址document.body.appendChild(a); //插到页面上a.click(); //通过点击触发URL.revokeObjectURL(a.href); //释放URL 对象document.body.removeChild(a); //删掉a标签代码2：
/**** @param {*} fileContent 文件本体* @param {*} _fileName 自定义文件名*/
export const exportFileUtil = (fileContent, _fileName) => {const content = fileContent;const blob = new Blob([content], {type: fileContent.type || "application/octet-stream; charset=utf-8",});const fileName = _fileName;if ("download" in document.createElement("a")) {//非IE下载const a = document.createElement("a"); //创建一个a标签a.download = fileName; //指定文件名称a.style.display = "none"; //页面隐藏a.href = URL.createObjectURL(blob); // href用于下载地址document.body.appendChild(a); //插到页面上a.click(); //通过点击触发URL.revokeObjectURL(a.href); //释放URL 对象document.body.removeChild(a); //删掉a标签} else {//IE10 + 下载navigator.msSaveBlob(blob, fileName);}
};
/*** * @param {*} res 接口返回的文件流*/
export const dowloadFileUrl = (res) => {console.log(res)const fileNames = res.headers['content-disposition']if (fileNames) {//解码const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1])// 处理返回的文件流const content = res.dataconst blob = new Blob([content], {// type: res.data.type||"application/vnd.ms-excel",type: res.data.type||"application/octet-stream; charset=utf-8"});if ('download' in document.createElement('a')) {//非IE下载const a = document.createElement('a') //创建一个a标签a.download = fileName //指定文件名称a.style.display = 'none' //页面隐藏a.href = URL.createObjectURL(blob) // href用于下载地址document.body.appendChild(a) //插到页面上a.click() //通过点击触发URL.revokeObjectURL(a.href) //释放URL 对象document.body.removeChild(a) //删掉a标签} else {//IE10 + 下载navigator.msSaveBlob(blob, fileName)}}
}总结：
直接拼接url为下载路径，创建一个a标签触发下载；
导出接口通过接口返回的二进制流，经过出来二进制流为Blob且type类型与接口一致。
三、补充理论知识
MIME类型是什么：点击访问
MIME类型有哪些： 点击访问
常见MIME【媒体类型】 ，如下：
扩展名----------MIME类型
.csv--------------text/csv
.jpeg/.jpg-------image/jpeg
.png-------------image/png
.rar--------------application/x-rar-compressed
.doc-------------application/msword
.docx-----------application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls--------------application/vnd.ms-excel
.xlsx------------application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.zip--------------application/zip
