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 = url
  link.click()

关键点

• responseType: 'blob'：这是告诉 axios 或 fetch 返回一个 Blob 对象，用于处理二进制数据。
• window.URL.createObjectURL：创建一个临时的 URL，用于下载文件。

注意事项

• 确保服务器支持跨域请求（CORS），否则可能会遇到跨域问题。
• 如果文件较大，可能需要考虑分块下载或显示下载进度。

通过这些步骤，你可以在 Vue 3 中实现文件下载功能。