使用 JavaScript 创建和保存文件

javascript file dialog save

2022-08-29 23:53:39

我有要写入文件的数据，并打开文件对话框，供用户选择保存文件的位置。如果它可以在所有浏览器中工作，那就太好了，但它必须在Chrome中工作。我想在客户端执行此操作。

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

saveFile: function(data)
{
}

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

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

答案 1

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中，数据在新选项卡中打开，必须手动保存此文件。

答案 2

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。