如何在 Javascript 中使用名称保存 textarea 中的文件？ [复制]

Posted 2023-05-07

【中文标题】如何在 Javascript 中使用名称保存 textarea 中的文件？ [复制]

【英文标题】：How to save file from textarea in Javascript with a name? [duplicate]

【发布时间】：2012-10-03 23:14:56

【问题描述】：

可能重复：Using html5/javascript to generate and save a file

我想要一个客户端 HTML/JS 解决方案来解决这个问题 - 我有一个用户可编辑的文本区域 A、一个文本字段 B 和一个按钮 C。当用户单击 C 时，她会下载一个名称等于 B 的文件.value 和内容等于 A.value。我查看了this，但它没有指定如何设置文件名，我不想要像this 这样的Flash 解决方案。我们可以假设用户使用的是最新的 Chrome 浏览器（这是我团队的一个小工具）

【问题讨论】：

可以通过指定header来设置文件名，见this question。

在规范中执行此操作但尚不可用，请参阅此问题的答案@JeremyJStarcher 链接到：***.com/a/10667687/1615483

【参考方案1】：

因为“我们可以假设用户使用的是最新的 Chrome 浏览器”，这种类型的事情可以通过创建一个具有 download 和 href 属性的 <a> 来完成，并且然后点击它。 示例代码如下。

var Download = 
    click : function(node) 
        var ev = document.createEvent("MouseEvents");
        ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        return node.dispatchEvent(ev);
    ,
    encode : function(data) 
            return 'data:application/octet-stream;base64,' + btoa( data );
    ,
    link : function(data, name)
        var a = document.createElement('a');
        a.download = name || self.location.pathname.slice(self.location.pathname.lastIndexOf('/')+1);
        a.href = data || self.location.href;
        return a;
    
;
Download.save = function(data, name)
    this.click(
        this.link(
            this.encode( data ),
            name
        )
    );
;

Download.save('hello world', 'my_file.txt');