在 Vue 3 中，你可以使用 axios 或 fetch 来下载文件，并将 responseType 设置为 blob 以处理二进制数据。以下是一个使用 axios 的示例：
使用 axios 下载文件
-
首先，确保你已经安装了
axios：npm install axios -
然后在你的 Vue 组件中使用
axios下载文件：<template><button @click="onDownloadClick">下载文件</button> </template><script> import { handleFileExport } from '@/utils/exportExcel'; import { apiGetDownload } from '@/api/encouragementApi';export default {methods: {function onDownloadClick(row: any) {const response = await axios.get('https://example.com/path/to/file', {responseType: 'blob', // 重要：设置响应类型为 blob});.handleFileExport(response )setTimeout(() => {ElMessage.success("下载成功")}, 1000)}}, }; </script>
在utils/exportExcel.ts
// 后端接口导出 非同源的资源需要下载，可以将其转换为Blob:Url
const handleFileExport = (res:any) => {
if(res.request.responseType==='blob'){let contentDisposition = res.headers['content-disposition']if (!contentDisposition) {contentDisposition = `;filename=${decodeURI(res.headers.filename)}`;}const fileName = window.decodeURI(contentDisposition.split(`filename=`)[1]);const blob = new Blob([res.data], {type: 'text/xlsx',});let downloadUrl = window.URL.createObjectURL(blob);let a = document.createElement('a');a.style.display = 'none';a.href = downloadUrl;a.download = fileName;let event = new MouseEvent('click');a.dispatchEvent(event);
}
};
使用a标签下载
const url = apiDownloadImportFileStr({encourageTypeId: 1})const link = document.createElement('a')link.href = urllink.click()
关键点
responseType: 'blob'：这是告诉axios或fetch返回一个Blob对象，用于处理二进制数据。window.URL.createObjectURL：创建一个临时的 URL，用于下载文件。
注意事项
- 确保服务器支持跨域请求（CORS），否则可能会遇到跨域问题。
- 如果文件较大，可能需要考虑分块下载或显示下载进度。
通过这些步骤，你可以在 Vue 3 中实现文件下载功能。
)
)
