壓縮包下載.png
1馋吗、需求分析
下載列表中展示的zip壓縮文件焕盟，需要實(shí)現(xiàn)用戶點(diǎn)擊下載去實(shí)現(xiàn)壓縮包的下載。
2宏粤、后臺(tái)接口分析
后臺(tái)的接口是通過get請(qǐng)求脚翘，query傳參，然后去下載二進(jìn)制文件绍哎，一般的話前端是直接通過a標(biāo)簽去實(shí)現(xiàn)文件的下載来农，但是這種方式也是可以學(xué)習(xí)的，今天便試了下崇堰，也算是個(gè)學(xué)習(xí)的過程沃于。
后臺(tái)接口格式.png
3、代碼實(shí)現(xiàn)
3.1海诲、接口部分
- 引入axios
import axios from "axios";
- URL的參數(shù)拼接
當(dāng)點(diǎn)擊某一項(xiàng)時(shí)繁莹，通過@click="handleDown(item)"將這一項(xiàng)的具體信息作為方法的參數(shù)傳入
然后在item中拿到當(dāng)前壓縮包的url，將這個(gè)參數(shù)傳給后臺(tái)
- URL的參數(shù)拼接
let url = `/api/tdm/common/storage/readFile/?fileUrl=${row.fileId}`,
3.2特幔、調(diào)接口開始下載
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
