vue中blob流文件下载

在 Vue 中下载 Blob 流文件，可以使用如下代码：

axios({
  url: 'your-api-url',
  method: 'get',
  responseType: 'blob' // 表示返回类型为 Blob
}).then(res => {
  const content = res.data;
  const blob = new Blob([content]);
  const fileName = 'file.xlsx'; // 文件名
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName; // 下载文件名
  link.click();
  window.URL.revokeObjectURL(link.href);
});

在上面的代码中，我们将响应类型设置为 `blob`，接收到响应后，先将数据转为 Blob 对象，然后手动创建一个下载链接，设置文件名及格式后触发点击事件下载文件。注意，最后需要调用 `window.URL.revokeObjectURL` 方法释放掉链接。

如果你使用的是 Vue 3.0，可以将上面的代码封装成一个自定义指令：

// 需要在 main.js 中引入该文件
import { createApp } from 'vue';
import App from './App.vue';
import download from './directives/download'; // 自定义下载指令

const app = createApp(App);
app.directive('download', download);
app.mount('#app');

// download.js
export default {
  mounted(el, binding) {
    const { url, fileName } = binding.value;
    el.addEventListener('click', () => {
      fetch(url)
        .then(res => res.blob())
        .then(blob => {
          const link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          window.URL.revokeObjectURL(link.href);
        });
    });
  }
};

在 Vue 3.0 中，自定义指令的定义方式与 Vue 2.x 有所不同。在上面的代码中，我们定义了一个名为 `download` 的自定义指令，它接收一个对象作为参数，包含了需要下载的文件的 URL 和文件名。在指令的 `mounted` 钩子函数中，我们监听元素的点击事件，并通过 `fetch` 方法获取文件数据，将其转为 Blob 对象，创建下载链接并触发点击事件下载文件。