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

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

使用 axios 下载文件

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

    bash 复制代码
    npm install axios
  2. 然后在你的 Vue 组件中使用 axios 下载文件:

    javascript 复制代码
    <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

javascript 复制代码
// 后端接口导出 非同源的资源需要下载,可以将其转换为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标签下载

javascript 复制代码
  const url = apiDownloadImportFileStr({encourageTypeId: 1})
  const link = document.createElement('a')
  link.href = url
  link.click()

关键点

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

注意事项

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

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

相关推荐
前端小巷子29 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑32 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了32 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆39 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆44 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员