纯前端导出txt文本文件

本篇文章讲解到了如何使用

blob

对象来下载导出指定内容的

txt

文本文件！

想要在前端导出

txt

文本文件，使用到了

Blob

。

Blob

(

Binary Large Object

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

**导出

txt

文件具体流程：**

1. 创建Blob对象： 在JavaScript中，需要先通过new Blob([data], options) 实例化一个Blob对象，其中data包含了想要存储在Blob中等待导出的数据内容，而options是一个包含配置的对象，用来指定Blob的类型等信息const blob =newBlob([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 = urla.download ='文本.txt'
4. 模拟点击下载： 一旦链接元素准备就绪，就可以通过调用click()方法来模拟点击链接元素，实现导出指定内容的txt文件。a.click()
5. 释放URL对象： 当文件下载完成后，应该调用URL.revokeObjectURL(url)来释放之前创建的URL对象，以释放浏览器内存资源

总的来说，文件下载导出的过程就是创建一个包含文件内容的

Blob

对象，将其转换为一个可下载的

URL

，然后通过模拟点击链接来触发下载，最后释放掉

URL

对象

我导出

txt

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

// 导出 txt 工具函数exportfunctionexportArrayToTxt(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 =newBlob([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);}