javascript实现生成并下载txt文件方式

目录 js生成并下载txt文件 下表显示了FileSaver.js在不同浏览器中的兼容性 js导出文件为txt并下载 首先HTML结构使用最简单的结构 然后js

js生成并下载txt文件

下面的简单函数允许您直接在浏览器中生成文件，而无需接触任何服务器。

它适用于所有HTML5就绪的浏览器，因为它使用了<a>的下载属性：

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 :)");

创建库， FileSaver.js 在不支持saveAs()的FileSaver接口的浏览器中实现它。如果您需要保存更大的文件，或者BLOB的大小限制，或者没有足够的内存，那么请看一看更高级的 StreamSaver.js ，它可以使用新的StreamsAPI的强大功能将数据直接异步保存到硬盘中。同时支持进度查看，取消和何时完成。

下面的代码段允许您生成一个文件(具有任何扩展名)并下载它，而无需链接任何服务器：

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

注意： 尽管它支持最新的浏览器，但您需要了解几个技巧才能更好运用。

js导出文件为txt并下载

今天要做一个数据下载到本地保存为txt文件，一开始网上找了很多例子，大部分都是用的ActiveXObject对象，但是粘贴到本地测试就报错，后来才发现这个只兼容IE。

后来又搜索了半天才得到解决，现在我就把解决办法给大家分享一下。

首先HTML结构使用最简单的结构

<textarea name="" id="text" cols="30" rows="10">这里输入的数据将保存为txt中</textarea>
<button id="save" type="button">保存</button>

然后js

? ? ? ?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://HdhCmsTestw3.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文件。 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

查看更多关于javascript实现生成并下载txt文件方式的详细内容...