JavaScript:创建和保存文件

IT技术 javascript file dialog save
2021-02-01 23:52:06

我有要写入文件的数据,并打开一个文件对话框供用户选择保存文件的位置。如果它适用于所有浏览器就好了,但它必须适用于 Chrome。我想在客户端做这一切。

基本上我想知道在这个函数中放什么:

saveFile: function(data)
{
}

该函数接收数据的位置,让用户选择一个位置来保存文件,并在该位置使用该数据创建一个文件。

如果有帮助的话,使用 HTML 也很好。

6个回答

Awesomeness01(不需要锚标记)对代码进行了很小的改进,并按照trueimage 的建议进行了添加(支持 IE):

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

经测试可在 Chrome、FireFox 和 IE10 中正常工作。

在 Safari 中,数据在新选项卡中打开,必须手动保存此文件。

这在 IE 11.0.9600.18426 中不起作用,但在 Chrome 52.0.2743.116 m 中起作用。有什么想法可以让它在 IE 11 中工作吗?
2021-03-10 23:52:06
具体是哪个版本的IE?
2021-03-14 23:52:06
下载时如何在此脚本中设置位置?
2021-03-23 23:52:06
在我看来var a = document.createElement("a")应该在else分支中,否则 IE10+ 将创建但不会删除锚 ( <a>) 元素。
2021-04-01 23:52:06
似乎在 Safari 中不起作用,只是没有任何反应(没有保存)
2021-04-02 23:52:06

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}
<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>

然后您将通过将下载属性放在锚标记上来下载文件。

我喜欢这个比创建数据 url 更好的原因是你不必制作一个很大的长 url,你可以只生成一个临时 url。

@Banjocat 您应该检查浏览器是否支持某些对象。示例检测:if("URL"in window&&"createObjectURL"in URL&&"download"in Element.prototype): 否则,您只需更改下载方法或注意到浏览器不支持下载文件所需的对象。
2021-03-15 23:52:06
在谷歌浏览器中不起作用: Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set. See https://www.chromestatus.com/feature/5706745674465280 for more details.
2021-03-21 23:52:06
@posfan12 尝试在您自己的页面中实现它,所以在 iframe 中呈现代码片段,如果没有 allow-downloads 标志,则不允许下载文件。
2021-04-02 23:52:06
在 Firefox 中,如果您单击链接,这会起作用,但如果您右键单击并选择将链接另存为...则不会发生任何事情。
2021-04-03 23:52:06

github 上的这个项目看起来很有前途:

https://github.com/eligrey/FileSaver.js

FileSaver.js 在本机不支持它的浏览器中实现了 W3C saveAs() FileSaver 接口。

也看看这里的演示:

http://eligrey.com/demos/FileSaver.js/

正如人们所期望的那样,所有代码都可以在 git 中找到。不确定“那是什么?”的目的是什么?评论是。如果它真的想知道它是什么,那么w3.org/TR/file-writer-api会有所帮助。如果它指出项目已取消,则该信息在 git 的 README 中。
2021-03-22 23:52:06
w3.org/TR/file-writer-api/#the-filesaver-interface说“本文档的工作已停止,不应被引用或用作实施的基础。”
2021-03-25 23:52:06
“实现w3C另存为”???那是什么?演示没用,没有代码。
2021-04-04 23:52:06
@Godsmith,我认为这并不重要,因为它似乎回退到 createObjectURL 或任何可用于保存文件的方法,并尽可能地处理浏览器差异。
2021-04-07 23:52:06

在创建文件之前选择保存文件的位置是不可能的。但是,至少在 Chrome 中,可以仅使用 JavaScript 生成文件。这是我创建 CSV 文件的一个旧示例。将提示用户下载它。不幸的是,这在其他浏览器中不能很好地工作,尤其是 IE。

<!DOCTYPE html>
<html>
<head>
    <title>JS CSV</title>
</head>
<body>
    <button id="b">export to CSV</button>
    <script type="text/javascript">
        function exportToCsv() {
            var myCsv = "Col1,Col2,Col3\nval1,val2,val3";

            window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
        }

        var button = document.getElementById('b');
        button.addEventListener('click', exportToCsv);
    </script>
</body>
</html>
当我使用它时,它会打开一个带有文本的新选项卡,它不会打开文件对话框窗口。
2021-03-09 23:52:06
@ user1756980 - 是的。您需要从该新选项卡中“保存到文件”。
2021-03-19 23:52:06
@JesseChisholm 你可以在 javascript 中做到这一点。只需在变量中创建一个锚标记并将下载属性放在其上(例如:a.download = "downloadname.txt"),然后使用 a.click() 单击它。
2021-03-28 23:52:06
这取决于浏览器、操作系统等。在我写答案的时候,Chrome 中的 csv 数据 url 会弹出一个保存对话框
2021-03-30 23:52:06

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}
<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.json', 'text/json')">Create file</button>

我认为如果您更改 mime 类型,这也可以与 json 文件一起使用。