JS导出文件为txt并下载

最新推荐文章于 2024-11-21 10:47:33 发布

转载最新推荐文章于 2024-11-21 10:47:33 发布 · 783 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/liuxiaohuan/p/9777371.html

文章标签：

#js

本文介绍了一种不依赖于ActiveXObject对象，在多种浏览器环境下实现将textarea中的文本数据下载并保存为本地TXT文件的方法。通过使用Blob对象和URL.createObjectURL方法，结合鼠标点击事件模拟，实现了跨浏览器兼容的数据导出功能。

今天要做一个数据下载到本地保存为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://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文件。