vue如何使用文件流进行下载(new Blob)

Vue可以使用File API和Blob对象实现文件下载功能。Blob对象表示二进制大对象，可以将文件数据打包为Uint8Array数组或字符串，从而实现文件下载。

以下是使用Blob对象进行文件下载的步骤：

1. 创建Blob对象

可以使用Blob构造函数创建Blob对象，该构造函数接受一个数组、字符串或HTML元素作为参数。例如，传入Uint8Array数组作为参数可以创建二进制Blob对象，如下所示：

let fileData = new Uint8Array([72,101,108,108,111,32,87,111,114,108,100]);
let blob = new Blob([fileData], { type: 'application/octet-stream' });

上述代码创建一个包含“Hello World”文本的二进制Blob对象。

1. 创建blob URL

使用URL.createObjectURL(blob)函数可以从Blob对象创建一个URL指针，该指针可以在浏览器中获取Blob数据。如下所示：

let url = URL.createObjectURL(blob);

1. 创建a标签并模拟点击进行下载

let link = document.createElement('a');
link.href = url;
link.download = 'filename.txt';
link.click();

上述代码创建一个新的a标签并将其链接到Blob数据的URL。设置download属性为“filename.txt”，可以将下载的文件命名为filename.txt。最后通过调用click()方法模拟点击链接进行文件下载。

以下是Vue中使用Blob对象进行文件下载的示例：

示例1：下载二进制文件

<template>
  <div>
    <button @click="downloadFile">下载二进制文件</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile() {
      let fileData = new Uint8Array([72,101,108,108,111,32,87,111,114,108,100]);
      let blob = new Blob([fileData], { type: 'application/octet-stream' });
      let url = URL.createObjectURL(blob);
      let link = document.createElement('a');
      link.href = url;
      link.download = 'filename.txt';
      link.click();
    }
  }
}
</script>

上述代码创建了一个按钮，并在点击按钮时下载包含“Hello World”文本的二进制Blob文件，并将其命名为filename.txt。

示例2：下载CSV文件

<template>
  <div>
    <button @click="downloadCSV">下载CSV文件</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadCSV() {
      let rows = [['Name', 'Age'], ['Alice', 25], ['Bob', 30], ['Charlie', 35]];
      let csvData = rows.map(row => row.join(',')).join('\n');
      let blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
      let url = URL.createObjectURL(blob);
      let link = document.createElement('a');
      link.href = url;
      link.download = 'data.csv';
      link.click();
    }
  }
}
</script>

上述代码创建了一个按钮，并在点击按钮时下载包含姓名和年龄数据的CSV文件，并将其命名为data.csv。该文件使用逗号分隔，并在换行符中断行。