vue blob

// 使用 Vue 和 Blob 创建并下载文件的示例代码

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      // 创建一个 Blob 对象，内容为简单的文本
      const content = '这是一些要下载的内容';
      const blob = new Blob([content], { type: 'text/plain' });

      // 创建一个临时的 a 标签用于触发下载
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'example.txt'; // 设置下载的文件名
      link.click();

      // 释放 URL 对象
      URL.revokeObjectURL(link.href);
    }
  }
};
</script>

<style scoped>
/* 这里可以添加一些样式 */
</style>

解释说明：

1. Blob 对象：Blob 是一种表示不可变的、原始数据的类文件对象。它可以用来表示常见的文件类型，如文本、图片、视频等。
2. 创建 Blob：我们使用 new Blob([content], { type: 'text/plain' }) 来创建一个包含文本内容的 Blob 对象。
3. 创建下载链接：通过创建一个临时的 <a> 标签，并设置其 href 属性为 Blob 的 URL，然后调用 link.click() 触发下载。
4. 释放 URL：使用 URL.revokeObjectURL(link.href) 释放创建的 URL 对象，避免内存泄漏。

这个示例展示了如何在 Vue 中使用 Blob 对象来创建并下载文件。