javascript實現(xiàn)生成并下載txt文件方式
js生成并下載txt文件
下面的簡單函數(shù)允許您直接在瀏覽器中生成文件,而無需接觸任何服務器。
它適用于所有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 :)");創(chuàng)建庫,FileSaver.js在不支持saveAs()的FileSaver接口的瀏覽器中實現(xiàn)它。如果您需要保存更大的文件,或者BLOB的大小限制,或者沒有足夠的內存,那么請看一看更高級的StreamSaver.js,它可以使用新的StreamsAPI的強大功能將數(shù)據(jù)直接異步保存到硬盤中。同時支持進度查看,取消和何時完成。
下面的代碼段允許您生成一個文件(具有任何擴展名)并下載它,而無需鏈接任何服務器:
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并下載
今天要做一個數(shù)據(jù)下載到本地保存為txt文件,一開始網(wǎng)上找了很多例子,大部分都是用的ActiveXObject對象,但是粘貼到本地測試就報錯,后來才發(fā)現(xiàn)這個只兼容IE。
后來又搜索了半天才得到解決,現(xiàn)在我就把解決辦法給大家分享一下。
首先HTML結構使用最簡單的結構
<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);
}這樣就可以在點擊保存后將textarea中輸入的內容本地化為txt文件。
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
動態(tài)顯示可輸入的字數(shù)提示還可以輸入的字數(shù)
這篇文章主要介紹了動態(tài)顯示可輸入的字數(shù)提示還可以輸入的字數(shù),需要的朋友可以參考下2014-04-04
js實現(xiàn)網(wǎng)頁自動刷新可制作節(jié)日倒計時效果
這篇文章主要介紹了通過js實現(xiàn)的網(wǎng)頁自動刷新,利用此功能可制作節(jié)日倒計時效果,需要的朋友可以參考下2014-05-05
兼容ie ff div 層 打開+關閉+ 拖動+遮罩+移動+動畫改變高寬
div層 打開+關閉+ 拖動+遮罩+移動+動畫改變高寬的實例js代碼2008-07-07
JavaScript設計模式--簡單工廠模式實例分析【XHR工廠案例】
這篇文章主要介紹了JavaScript設計模式--簡單工廠模式,結合實例形式分析了JavaScript設計模式中簡單工廠模式原理與XHR工廠應用案例,需要的朋友可以參考下2020-05-05
javascript一個判斷瀏覽器類型的函數(shù)(類)
javascript一個判斷瀏覽器類型的函數(shù)(類)...2007-08-08
純JavaScript實現(xiàn)的完美漸變彈出層效果代碼
對于Web項目開發(fā)尤其是前臺UI的設計而言,用戶體驗至關重要,因為它直接關系到項目的成敗,簡潔,平滑,優(yōu)雅的設計永遠能夠受到用戶的青睞。2010-04-04
Javascript 數(shù)組添加一個 indexOf 方法的實現(xiàn)代碼
Javascript 的字符串有個 indexOf 的方法,能夠返回字符在指定的字符串中的位置,非常有用,本文介紹了如何給 Javascript 數(shù)組也添加一個類似的方法。2009-09-09

