用JavaScript创建并保存一个文件

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

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

saveFile: function(data)
{
}

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

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

当前回答

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

2015-06-14 17:09:08

其他回答

StreamSaver是保存非常大的文件的替代方案，而不必将所有数据保存在内存中。事实上，它模拟了服务器保存文件时的所有剂量，但所有客户端都使用service worker。

你可以获取写入器并手动写入Uint8Array的Uint8Array，或者将二进制readableStream管道到可写流

下面有几个例子:

如何将多个文件保存为zip文件管道readableStream从响应或blob.stream()到StreamSaver 在输入内容时手动写入可写流或者重新录制视频/音频

下面是一个最简单的例子:

const fileStream = streamSaver.createWriteStream('filename.txt')

new Response('StreamSaver is awesome').body
  .pipeTo(fileStream)
  .then(success, error)

如果你想保存一个blob，你只需要把它转换成一个readableStream

new Response(blob).body.pipeTo(...) // response hack
blob.stream().pipeTo(...) // feature reference

2019-05-31 19:41: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>

2012-11-15 20:08:19

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

2015-06-14 17:09:08

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

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

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

也可以看看这里的演示:

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

2012-11-15 20:05:49

对于Chrome和Firefox，我一直使用纯JavaScript方法。

(我的应用程序不能使用Blob.js这样的包，因为它是由一个特殊的引擎提供的:一个DSP和一个WWWeb服务器，几乎没有空间容纳任何东西。)

function FileSave(sourceText, fileIdentity) {
    var workElement = document.createElement("a");
    if ('download' in workElement) {
        workElement.href = "data:" + 'text/plain' + "charset=utf-8," + escape(sourceText);
        workElement.setAttribute("download", fileIdentity);
        document.body.appendChild(workElement);
        var eventMouse = document.createEvent("MouseEvents");
        eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        workElement.dispatchEvent(eventMouse);
        document.body.removeChild(workElement);
    } else throw 'File saving not supported for this browser';
}

注释、警告和模棱两可的词语:

I have had success with this code in both Chrome and Firefox clients running in Linux (Maipo) and Windows (7 and 10) environments. However, if sourceText is larger than a MB, Chrome sometimes (only sometimes) gets stuck in its own download without any failure indication; Firefox, so far, has not exhibited this behavior. The cause might be some blob limitation in Chrome. Frankly, I just don't know; if anybody has any ideas how to correct (or at least detect), please post. If the download anomaly occurs, when the Chrome browser is closed, it generates a diagnostic such as This code is not compatible with Edge or Internet Explorer; I have not tried Opera or Safari.

2018-02-22 01:28:47

用JavaScript创建并保存一个文件

推荐文章

最新文章

标签