javascript实现生成并下载txt文件方式
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
js生成并下载txt文件
下面的简单函数允许您直接在浏览器中生成文件,而无需接触任何服务器。
它适用于所有HTML5就绪的浏览器,因为它使用了<a>的下载属性:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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的强大功能将数据直接异步保存到硬盘中。同时支持进度查看,取消和何时完成。
下面的代码段允许您生成一个文件(具有任何扩展名)并下载它,而无需链接任何服务器:
1 2 3 4 5 6 7 8 9 | 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结构使用最简单的结构
1 2 | < textarea name = "" id = "text" cols = "30" rows = "10" >这里输入的数据将保存为txt中</ textarea > < button id = "save" type = "button" >保存</ button > |
然后js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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文件。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
至2023年最好用的兼容多浏览器的原生js复制函数copyText
因为后台需要增加一些复制一些内容非表单中内容,那么下面这个函数就非常的好用了,其实也是利用了表单的数据权限比较容易突破,下面是具体的实现函数,大家可以拿走2023-05-05
最新评论