Question

我正在使用纯Javascript编写文本编辑器。我希望这样当用户点击“保存”按钮时，编辑器会下载该文件。我已经部分工作了：

uriContent = "data:application/octet-stream," + encodeURIComponent(codeMirror.getValue());
newWindow=window.open(uriContent, 'filename.txt');

文件下载，但问题是该文件名为“download”。

问题：如何将文件名更改为我想要的内容，例如filename.txt？

Answer 1

将“保存”按钮替换为锚链接并动态设置新的download属性。适用于Chrome和Firefox：

var d = "ha";
$(this).attr("href", "data:image/png;base64,abcdefghijklmnop").attr("download", "file-" + d + ".png");

以下是一个名称设置为当前日期的工作示例：http://jsfiddle.net/Qjvb3/

此处为download属性的兼容性表：http://caniuse.com/download

Answer 2

function saveAs(uri, filename) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
        document.body.appendChild(link); // Firefox requires the link to be in the body
        link.download = filename;
        link.href = uri;
        link.click();
        document.body.removeChild(link); // remove the link when done
    } else {
        location.replace(uri);
    }
}

Answer 3

使用filename属性，如下所示：

uriContent = "data:application/octet-stream;filename=filename.txt," + 
              encodeURIComponent(codeMirror.getValue());
newWindow=window.open(uriContent, 'filename.txt');

修改

显然，没有可靠的方法来做到这一点。请参阅：Is there any way to specify a suggested filename when using data: URI?

使用文件名保存文件Javascript

3 个答案: