vue blob下载

在Vue中进行文件下载主要有两种方式：URL下载和Blob下载。

URL下载是最简单的方法，只需将文件的URL传递给浏览器即可，浏览器会自动下载文件。在Vue中，可以使用`window.open(url)`或者`window.location.href = url`来实现URL下载。但这种方法只适用于服务器直接提供下载链接的情况。

而Blob下载则适合于需要在客户端动态生成文件并下载的情况。Blob是二进制数据的一种表示形式，可以用于生成文件对象。首先，需要使用`axios`或`fetch`等工具从后端获取数据。然后，创建一个Blob对象并填充数据。最后，创建一个URL对象，并将其赋给一个a标签的href属性，并添加download属性指定下载文件的名称，最后调用click()方法点击该a标签即可开始下载。

举个例子，假设我们从后端获取到了一个文件的二进制数据data，并且文件名为filename。可以通过以下代码实现Blob下载：

import axios from 'axios';

export default {
  methods: {
    downloadFile() {
      axios.get('/api/download')
        .then(response => {
          const data = response.data;
          const blob = new Blob([data]);
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'filename');
          link.click();
          window.URL.revokeObjectURL(url);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}

在以上代码中，首先使用axios发送GET请求获取文件数据。然后，通过`new Blob([data])`创建Blob对象。接着，通过`window.URL.createObjectURL(blob)`创建一个URL对象。然后，使用createElement方法创建一个a标签，并将URL对象赋给href属性和设置download属性，最后调用click()方法触发文件下载。最后，记得使用`window.URL.revokeObjectURL(url)`释放URL对象以节省内存。

通过以上的代码，我们就可以实现在Vue中进行Blob下载了。