1. 首页>
  2. 技术文章>
  3. vue字节流下载

vue字节流下载

11/7/24 4:52:25 PM 浏览 1185 评论 0

vue

在 Vue.js 中,你可以使用 axios 库来请求接口并处理字节流。假设接口返回的是一个文件的字节流,你可以将其转换为 Blob 对象,然后创建一个链接来下载该文件并保存到本地。以下是一个示例,展示如何实现这一过程:

<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  methods: {
    async downloadFile() {
      try {
        const response = await axios.get('https://your-api-endpoint.com/download', {
          responseType: 'blob' // 确保响应类型为 blob
        });
        // 创建一个 Blob 对象
        const blob = new Blob([response.data], { type: 'application/octet-stream' });
        // 创建一个链接元素
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        
        // 设置下载文件的名称
        link.download = 'your-file-name.ext';
        // 触发点击事件以下载文件
        document.body.appendChild(link);
        link.click();
        // 移除链接元素
        document.body.removeChild(link);
        URL.revokeObjectURL(link.href);
      } catch (error) {
        console.error('Error downloading file:', error);
      }
    }
  }
}
</script>

网友讨论