压缩包下载.png
1、需求分析
下载列表中展示的zip压缩文件，需要实现用户点击下载去实现压缩包的下载。
2、后台接口分析
后台的接口是通过get请求，query传参，然后去下载二进制文件，一般的话前端是直接通过a标签去实现文件的下载，但是这种方式也是可以学习的，今天便试了下，也算是个学习的过程。
后台接口格式.png
3、代码实现
3.1、接口部分
- 引入axios
import axios from "axios";
- URL的参数拼接
当点击某一项时，通过@click="handleDown(item)"将这一项的具体信息作为方法的参数传入
然后在item中拿到当前压缩包的url，将这个参数传给后台
- URL的参数拼接
let url = `/api/tdm/common/storage/readFile/?fileUrl=${row.fileId}`,
3.2、调接口开始下载
row.taskName为下载的压缩包的名字
axios({
method: "get",
url: url,
responseType: "blob",
})
.then((res) => {
let data = res.data;
let url = window.URL.createObjectURL(new Blob([data]));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", row.taskName);
document.body.appendChild(link);
link.click();
})
.catch((error) => {
console.error(error);
});
压缩包便成功下载了
下载成功.png
