纯前端导出txt文本文件

本篇文章讲解到了如何使用blob对象来下载导出指定内容的txt文本文件！

想要在前端导出txt文本文件，使用到了Blob。

Blob(Binary Large Object)
是一种用于表示二进制大对象的数据类型。它在前端开发中有许多应用场景，主要设计文件操作、数据传输和多媒体处理等方面。

导出txt文件具体流程：

1. 创建Blob对象： 在JavaScript中，需要先通过new Blob([data], options) 实例化一个Blob对象，其中data包含了想要存储在Blob中等待导出的数据内容，而options是一个包含配置的对象，用来指定Blob的类型等信息

   const blob = new Blob([data], { type: text/plain })
   

2. 创建URL: 一旦有了Blob对象，就可以使用URL.createObjectURL(blob)来创建一个代表Blob对象的内容的URL，这个URL是唯一的，可以被用作链接或者源

   const url = URL.createObjectURL(blob)
   

3. 创建链接元素： 通过创建一个a标签元素，设置a标签的href属性为之前创建的包含Blob对象内容的URL，点击a标签如果希望直接下载文件，而不是跳转到URL地址，可以指定a标签的download属性来指定下载的文件名，告诉浏览器，点击a标签链接时应该下载链接指定的资源，而不是打开它。

   const a = document.createElment('a')
   a.href = url
   a.download = '文本.txt'
   

4. 模拟点击下载： 一旦链接元素准备就绪，就可以通过调用click()方法来模拟点击链接元素，实现导出指定内容的txt文件。

   a.click()
   

5. 释放URL对象： 当文件下载完成后，应该调用URL.revokeObjectURL(url)来释放之前创建的URL对象，以释放浏览器内存资源

总的来说，文件下载导出的过程就是创建一个包含文件内容的Blob对象，将其转换为一个可下载的URL，然后通过模拟点击链接来触发下载，最后释放掉URL对象

我导出txt为指定数据的代码，希望对大家有帮助。

// 导出 txt 工具函数
export function exportArrayToTxt(arrayToExport, filename) {
  // 将每个对象转换为以键值对每行为一个元素的字符串
  const textDataArray = arrayToExport.map(item => {
    const obj = {
      east: item.east,
      north: item.north
    }
    // 行使用 \t(Tab 制表符) 分隔
    return Object.values(obj).map(item => item).join('\t\t\t');
  });
  // 将数组转换为文本形式  \n(换行符)
  const textData = textDataArray.join('\n');
  // 创建 Blob 对象
  const blob = new Blob([textData], { type: 'text/plain' });

  // 创建 a 标签
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename || 'data.txt';

  // 模拟点击下载
  link.click();

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