js 将文件 url 地址转成 Blob 文件流并下载

&活在当下&2024-11-06 23:25

安装 axios（如果还没有安装）：
javascript 复制代码
```
npm install axios
```
创建一个方法来处理文件下载：

在你的 Vue 组件中，可以创建一个方法来处理文件下载。假设你有一个 API 接口返回文件流，你可以使用 axios 来发送请求并处理响应。

javascript 复制代码

<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadFile() {
      try {
        // 假设你的接口是 /api/get-file
        const response = await axios.get('/api/get-file', {
          responseType: 'blob' // 确保响应类型为blob
        });

        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pdf'); // 设置下载的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('Error downloading file:', error);
      }
    }
  }
};
</script>

axios.get('/api/get-file', { responseType: 'blob' })：发送一个GET请求到你的 API 接口，并将响应类型设置为 blob，以便接收二进制数据。
window.URL.createObjectURL(new Blob([response.data]))：将响应数据转换为一个 Blob 对象，并生成一个临时的URL。
创建一个隐藏的 <a> 标签，并将其 href 属性设置为生成的临时URL，同时设置 download 属性以指定下载的文件名。
将这个 <a> 标签添加到文档中，然后模拟点击事件以触发下载。
最后，移除这个临时创建的 <a> 标签。

这样，当用户点击按钮时，浏览器会开始下载指定的文件。