2024年Web前端最新【vue工作随笔】前端配合后端进行文件下载的方法记录，2024年最新面试的总结

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

});

}

3.前端实现

---

（1）方法一：window.open

使用  window.open(res.data.url, “_blank”);

语法：window.open([URL], [窗口名称], [参数字符串])

wendow.open如果里面放入的是文件，肯定是会下载文件的

// 导入模块-下载模板

downloadTemplate(type) {

getTemplate(type).then((res) => {

console.log(res.data, “================”);

window.open(res.data.url, “_blank”);

});

},

实现效果：在页面下端下载文件，但是！！！文件名无法修改！！！

（2）方法二：a标签url转化为blob下载

// window.open(res.data.url, “_blank”);

// 方法2

const url = res.data.url;

const blob = new Blob([url], {

type: “application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset-UTF-8”,});

const blobUrl = URL.createObjectURL(blob);

const downloadElement = document.createElement(“a”);

console.log(downloadElement);

downloadElement.style.display = “none”;

downloadElement.target = “_blank”;

downloadElement.href = blobUrl;

downloadElement.download = “模板.xlsx”;

document.body.appendChild(downloadElement);

downloadElement.click();

URL.revokeObjectURL(url); // 释放内存

效果：可以看到这种方式是可以修改文件的文件名的，但是文件打开之后内容就变成了url

这种url变成blob的方法是错误的

正确的方法如下：

// 方法2

// 将url转成blob地址，

const url = res.data.url;

const name =

type == 1

? “服务器模板.xlsx”

type == 2

? “数据组件模板.xlsx”

“网络和安全设备模板.xlsx”;

const a = document.createElement(“a”);

fetch(url)

.then((res) => res.blob())

.then((blob) => {

// 将链接地址字符内容转变成blob地址

a.href = URL.createObjectURL(blob);

console.log(a.href);

a.download = name; // 下载文件的名字

// a.download = url.split(‘/’)[url.split(‘/’).length -1] // // 下载文件的名字

document.body.appendChild(a);

a.click();

});

});

二、根据文件流下载文件

===========

1.功能设计

---

页面实现单一文件下载和文件批量下载生成压缩包

2.接口返回值

---

（1）前端代码逻辑框架

handleDownload(row) {

const ids = row.id != undefined ? [row.id] : this.ids;

if (ids.length === 0) {

this.$message.warning(“请勾选数据”);

} else if (ids.length === 1) {

downloadOneData({ ids: ids }).then((res) => {

// window.open(res.data.url, “_blank”);

// 下载

});

} else {

downloadBatchData({ ids: ids }).then((res) => {

// 下载

});

}

},

（2）前端接口调用

export function downloadOneData(ids) {

return request({

url: ‘/api/work/order/download’,

method: ‘post’,

data: ids

})

}

export function downloadBatchData(ids) {

return request({

url: ‘/api/work/order/download’,

method: ‘post’,

data: ids,

responseType: ‘blob’

})

}

（3）后端返回数据

单文件下载时返回数据为url

多文件下载时返回数据为 文件流

---

3.前端实现

---

单文件的下载思路同上述第一步骤

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。