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

 更新时间:2022年09月19日 09:50:46   作者:z__a  
这篇文章主要介绍了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在不同浏览器中的兼容性

BrowserConstructs asFilenamesMax Blob SizeDependencies
Firefox 20+BlobYes800 MiBNone
Firefox < 20data: URINon/aBlob.js
ChromeBlobYes[500 MiB][3]None
Chrome for AndroidBlobYes[500 MiB][3]None
EdgeBlobYes?None
IE 10+BlobYes600 MiBNone
Opera 15+BlobYes500 MiBNone
Opera < 15data: URINon/aBlob.js
Safari 6.1+*BlobNo?None
Safari < 6data: URINon/aBlob.js
Safari 10.1+BlobYesn/aNone

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

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文件。 

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/zhang__ao/article/details/82625606

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • js模拟电脑选择多文件夹效果_选区代码

    js模拟电脑选择多文件夹效果_选区代码

    模仿选择文件夹效果的javascript封装类,效果不错,实际应用呢,暂时用不到,大家可以学习思路
    2008-09-09
  • js/jquery解析json和数组格式的方法详解

    js/jquery解析json和数组格式的方法详解

    本篇文章主要是对js/jquery解析json和数组格式的方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • angular-tree-component的使用详解

    angular-tree-component的使用详解

    这篇文章主要介绍了angular-tree-component的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • async/await实现Promise.all()的方式

    async/await实现Promise.all()的方式

    Promise.all() 方法接收一个 promise 的 iterable 类型的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个数组,对async/await实现Promise.all()相关知识感兴趣的朋友一起看看吧
    2022-12-12
  • JavaScript中async/await的高级用法小结

    JavaScript中async/await的高级用法小结

    JavaScript的异步编程已经从回调(Callback)演进到Promise,再到如今广泛使用的async/await语法,本文为大家整理了7个async/await高级用法,希望对大家有所帮助
    2023-12-12
  • 用原生js统计文本行数的简单示例

    用原生js统计文本行数的简单示例

    这篇文章我们来看看如何利用原生的JavaScript实现统计文本的行数,代码实现起来很简单,有需要的可以参考借鉴。
    2016-08-08
  • 至2023年最好用的兼容多浏览器的原生js复制函数copyText

    至2023年最好用的兼容多浏览器的原生js复制函数copyText

    因为后台需要增加一些复制一些内容非表单中内容,那么下面这个函数就非常的好用了,其实也是利用了表单的数据权限比较容易突破,下面是具体的实现函数,大家可以拿走
    2023-05-05
  • JavaScript实现拖拽和缩放效果

    JavaScript实现拖拽和缩放效果

    这篇文章主要为大家详细介绍了JavaScript实现拖拽和缩放效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 深入了解JavaScript发布订阅模式

    深入了解JavaScript发布订阅模式

    JavaScript 发布订阅模式(Publish/Subscribe Pattern)是一种常用的设计模式,发布订阅模式的核心思想是解耦事件的发生和事件的处理,本文将介绍 JavaScript 发布订阅模式的基本原理、应用场景以及各场景的代码示例,需要的朋友可以参考下
    2023-05-05
  • Js 实现表格隔行换色一例

    Js 实现表格隔行换色一例

    Js实现表格隔行换色一例,这种效果网上已经有很多啦,每一种都有特色,请大家选择使用。
    2009-11-11

最新评论