前端使用vue3 怎么接受下面接口的数据把文件下载下来? public IActionResult DownloadFolder string path = upload20230208; 指定要打包的文件夹路径 var folderPath = PathCombineAppWebHostEnvironmentWebRootPath path;
在前端使用Vue 3接受这个接口的数据并下载文件,可以按照以下步骤进行操作:
- 在Vue 3项目中创建一个方法来发送请求并接收数据。
import axios from 'axios';
methods: {
downloadFolder() {
axios.get('/api/downloadFolder', {
responseType: 'blob' // 设置响应类型为二进制数据
})
.then(response => {
this.saveFile(response.data);
})
.catch(error => {
console.error(error);
});
},
saveFile(data) {
const blob = new Blob([data], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', '7月税务信息.zip');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
- 在Vue组件中调用
downloadFolder方法,例如在模板中添加一个按钮。
<template>
<button @click="downloadFolder">下载文件</button>
</template>
这样,当按钮被点击时,前端会发送请求到后端接口/api/downloadFolder,后端会生成一个ZIP文件并返回给前端。前端通过saveFile方法将接收到的二进制数据转换为Blob对象并创建下载链接,最后模拟点击链接进行文件下载
原文地址: https://www.cveoy.top/t/topic/imqr 著作权归作者所有。请勿转载和采集!