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 中实现文件下载功能。

相关推荐
蓝天白云下遛狗25 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再3 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref