1. function saveFile() {
  2.   var data = document.querySelector('#text').value;
  3.   // var data = '自定义的数据内容，可以是服务端返回滴！';
  4.   var name = 'cdk.txt';
  5.   exportRaw(data, name);
  6. }
  7. function exportRaw(data, name) {
  8.   var urlObject = window.URL || window.webkitURL || window;
  9.   var export_blob = new Blob([data]);
  10.   var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
  11.   save_link.href = urlObject.createObjectURL(export_blob);
  12.   save_link.download = name;
  13.   save_link.click();
  14. }


  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>导出数据为txt文件</title>
  9. </head>
  11. <body>
  12.     <textarea name="" id="text" cols="30" rows="10">这里输入的数据将保存为txt中</textarea>
  14.     <button id="save" type="button">保存</button>
  16.     <script>
  17.         document.querySelector('#save').addEventListener('click', saveFile);
  19.         function saveFile() {
  20.             // var inValue = document.querySelector('#text').value;
  21.             var inValue = '自定义的数据内容，可以是服务端返回滴！';
  22.             exportRaw('cdk.txt', inValue);
  23.         }
  25.         function exportRaw(name, data) {
  26.             // Window.URL 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 URL 对象。
  27.             var urlObject = window.URL || window.webkitURL || window;
  29.             // Blob 对象表示一个不可变、原始数据的类文件对象。
  30.             var export_blob = new Blob([data]);
  32.             // 创建一个具有指定的命名空间URI和限定名称的元素。
  33.             var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
  35.             // URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
  36.             // 这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
  37.             save_link.href = urlObject.createObjectURL(export_blob);
  39.             // HTMLAnchorElement.download 属性是一个 DOMString ，表明链接的资源将被下载，而不是显示在浏览器中。
  40.             // HTMLAnchorElement 接口表示超链接元素，并提供一些特别的属性和方法（除了那些继承自普通 HTMLElement对象接口的之外）以用于操作这些元素的布局和显示。
  41.             // DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 一个String。就是一个普通的字符串
  42.             save_link.download = name;
  44.             console.log(save_link); // 可以发现这是个 a 元素
  46.             // fakeClick(save_link); // 模拟点击事件
  47.             save_link.click();
  48.         }
  50.         function fakeClick(obj) {
  51.             // createEvent 创建一个新的事件（Event），随之必须调用自身的 init 方法进行初始化。
  52.             // var ev = document.createEvent("MouseEvents");
  53.             // initMouseEvent 已废弃，不建议使用，用 MouseEvent() 代替
  54.             // ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  56.             // MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。
  57.             // var ev = new MouseEvent(typeArg, mouseEventInit); // 生成一个新的 MouseEvent 对象
  58.             var ev = new MouseEvent("click")
  60.             // 向一个指定的事件目标派发一个事件,  并以合适的顺序同步调用目标元素相关的事件处理函数。
  61.             obj.dispatchEvent(ev);
  62.         }
  63.     </script>
  64. </body>
  66. </html>

导出 textarea 内容效果图

image.png