vue3 下载文件 responseType-blob 或者 a标签

在 Vue 3 中，你可以使用 axios 或 fetch 来下载文件，并将 responseType 设置为 blob 以处理二进制数据。以下是一个使用 axios 的示例：

使用 axios 下载文件

1. 首先，确保你已经安装了 axios：

   npm install axios
   

2. 然后在你的 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 中实现文件下载功能。