本文介绍如何在纯前端环境中生成并下载TXT文件。通过HTML5的Blob对象和download属性，可实现无需服务器交互的文件保存。针对不支持saveAs接口的旧版浏览器，推荐使用FileSaver.js库。此外，文章还对比了ActiveXObject在IE中的局限性，提供了基于Blob的现代浏览器解决方案及代码示例，并附带了主要浏览器的兼容性说明。
JavaScript实现前端生成并下载TXT文件的方法与兼容方案
以下介绍的简单函数允许您直接在浏览器端生成文件，整个过程无需与服务器进行交互。
该方法适用于所有支持HTML5标准的现代浏览器，其核心原理是利用了<a>标签的download属性。
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
download("hello.txt","This is the content of my file :)");对于不支持saveAs()接口的浏览器，可以引入FileSaver.js库来实现该功能。如果需要保存较大的文件，或者受限于Blob大小及内存不足的情况，建议采用更高级的StreamSaver.js方案。该方案利用新的Streams API，能够将数据直接异步保存到硬盘中，同时支持进度查看、取消操作以及完成状态提示。
以下代码片段展示了如何生成一个文件（支持任意扩展名）并触发下载，全程无需链接任何服务器端资源。
var content = "What's up , hello world";
// any kind of extension (.txt,.cpp,.cs,.bat)
var filename = "hello.txt";
var blob = new Blob([content], {
type: "text/plain;charset=utf-8"
});
saveAs(blob, filename);下表列出了FileSaver.js在不同浏览器环境中的兼容性情况。
| Browser | Constructs as | Filenames | Max Blob Size | Dependencies |
|---|---|---|---|---|
| Firefox 20+ | Blob | Yes | 800 MiB | None |
| Firefox < 20 | data: URI | No | n/a | Blob.js |
| Chrome | Blob | Yes | [500 MiB][3] | None |
| Chrome for Android | Blob | Yes | [500 MiB][3] | None |
| Edge | Blob | Yes | ? | None |
| IE 10+ | Blob | Yes | 600 MiB | None |
| Opera 15+ | Blob | Yes | 500 MiB | None |
| Opera < 15 | data: URI | No | n/a | Blob.js |
| Safari 6.1+* | Blob | No | ? | None |
| Safari < 6 | data: URI | No | n/a | Blob.js |
| Safari 10.1+ | Blob | Yes | n/a | None |
需要注意的是，尽管该方案支持最新的浏览器，但为了更好地应用，仍需了解一些关键技巧。
JavaScript导出文件为TXT并下载的具体实现
近期需要实现将数据下载到本地并保存为TXT文件的功能。起初在网上搜索了大量示例，发现大多数例子使用了ActiveXObject对象，但在本地测试时均报错。随后才了解到，ActiveXObject仅兼容IE浏览器。
经过进一步搜索和调试，最终找到了解决方案，现将具体方法分享如下。
首先，HTML结构保持最简形式。
<textarea name="" id="text" cols="30" rows="10">这里输入的数据将保存为txt中</textarea>
<button id="save" type="button">保存</button>接着编写JavaScript代码。
document.querySelector('#save').addEventListener('click', saveFile);
function fakeClick(obj) {
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
obj.dispatchEvent(ev);
}
function exportRaw(name, data) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
fakeClick(save_link);
}
function saveFile(){
var inValue = document.querySelector('#text').value;
exportRaw('test.txt', inValue);
}通过上述代码，点击保存按钮后，即可将textarea中输入的内容本地化为TXT文件进行下载。
以上为个人实践经验总结，希望能为大家提供参考，也希望大家多多支持本站。