快捷導(dǎo)航

javascript實(shí)現(xiàn)生成并下載txt文件方式

更新時(shí)間：2022年09月19日 09:50:46 作者：z__a

這篇文章主要介紹了javascript實(shí)現(xiàn)生成并下載txt文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

js生成并下載txt文件

下面的簡(jiǎn)單函數(shù)允許您直接在瀏覽器中生成文件，而無需接觸任何服務(wù)器。

它適用于所有HTML5就緒的瀏覽器，因?yàn)樗褂昧?lt;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 :)");

創(chuàng)建庫，FileSaver.js在不支持saveAs()的FileSaver接口的瀏覽器中實(shí)現(xiàn)它。如果您需要保存更大的文件，或者BLOB的大小限制，或者沒有足夠的內(nèi)存，那么請(qǐng)看一看更高級(jí)的StreamSaver.js，它可以使用新的StreamsAPI的強(qiáng)大功能將數(shù)據(jù)直接異步保存到硬盤中。同時(shí)支持進(jìn)度查看，取消和何時(shí)完成。

下面的代碼段允許您生成一個(gè)文件(具有任何擴(kuò)展名)并下載它，而無需鏈接任何服務(wù)器：

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

注意：盡管它支持最新的瀏覽器，但您需要了解幾個(gè)技巧才能更好運(yùn)用。

js導(dǎo)出文件為txt并下載

今天要做一個(gè)數(shù)據(jù)下載到本地保存為txt文件，一開始網(wǎng)上找了很多例子，大部分都是用的ActiveXObject對(duì)象，但是粘貼到本地測(cè)試就報(bào)錯(cuò)，后來才發(fā)現(xiàn)這個(gè)只兼容IE。

后來又搜索了半天才得到解決，現(xiàn)在我就把解決辦法給大家分享一下。

首先HTML結(jié)構(gòu)使用最簡(jiǎn)單的結(jié)構(gòu)

<textarea name="" id="text" cols="30" rows="10">這里輸入的數(shù)據(jù)將保存為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://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);
　　}

這樣就可以在點(diǎn)擊保存后將textarea中輸入的內(nèi)容本地化為txt文件。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: