在客户端的 Chrome 中使用 Javascript 创建文件

IT技术 javascript google-chrome google-chrome-extension facebook-javascript-sdk dom-events
2021-01-21 13:08:57

我想知道我是否可以创建一个文本文件并使用 Javascript 将该文件保存在他/她计算机的用户“下载”部分中。我的功能应该工作的方式是当用户单击提交按钮时,我在文本文件中填充用户信息,然后将其保存在他的机器中。我希望它在谷歌浏览器中工作。

这可能吗?我看过一些帖子,专门告诉我这是一个严重的安全问题。

6个回答

当然可以,使用全新的 API。

 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

 window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    fs.root.getFile('test.bin', {create: true}, function(fileEntry) { // test.bin is filename
        fileEntry.createWriter(function(fileWriter) {
            var arr = new Uint8Array(3); // data length

            arr[0] = 97; // byte data; these are codes for 'abc'
            arr[1] = 98;
            arr[2] = 99;

            var blob = new Blob([arr]);

            fileWriter.addEventListener("writeend", function() {
                // navigate to file, will download
                location.href = fileEntry.toURL();
            }, false);

            fileWriter.write(blob);
        }, function() {});
    }, function() {});
}, function() {});
导航到文件似乎没有下载它。您的示例运行良好,但我的导航到链接而不是下载。
2021-03-18 13:08:57
@Praveen:那不确定;对我来说,它开始下载test.bin你用的是什么扩展?也许这很重要。
2021-03-29 13:08:57
@Praveen:我错过了一些事情。请查看我更新的代码。新小提琴工作正常吗?
2021-03-31 13:08:57
@pimvdb 链接已损坏
2021-04-12 13:08:57
当我尝试执行此代码时,我被定向到本地链接。它没有内容。我想要一个文本文件,所以我更改了名称并按照html5rocks.com/en/tutorials/file/filesystem上的说明进行操作
2021-04-13 13:08:57

在 Chrome 浏览器中输入这个

data:text;charset=utf-8,helloWorld

因此,要为您的用户构建下载,您可以执行以下操作

data='<a href='data:text;charset=utf-8,'+uriEncode(yourUSERdataToDownload)+' >Your Download</a>

然后将其注入 dom 供用户按下。

你将如何设置下载文件的文件名?我得到一个名为“下载”的无扩展名文件,有什么办法可以改变它吗?
2021-03-15 13:08:57
没有更多的消息传递废话并尝试使用各种 API 却发现它们已被弃用。谢谢!
2021-03-25 13:08:57
哈哈 Ty 这就是我发现它时的想法 =)
2021-03-27 13:08:57
@Flater:使用download属性。它适用于 Chrome,并允许您下载任何文件名的任何内容。
2021-04-09 13:08:57
不客气,window.location = "mailto:someone@example.com?Subject=Hello%20again" 来看看吧
2021-04-11 13:08:57

以下方法适用于 IE11+、Firefox 25+ 和 Chrome 30+:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

在行动中看到这个:http : //jsfiddle.net/Kg7eA/

Firefox 和 Chrome 支持数据 URI 导航,这允许我们通过导航到数据 URI 来创建文件,而 IE 出于安全目的不支持它。

另一方面,IE 具有用于保存 blob 的 API,可用于创建和下载文件。

这似乎不再适用于 chrome。要修复它,请参阅stackoverflow.com/a/23956661/945687确实有效。
2021-03-19 13:08:57
在哪里可以找到关于这其中发生的事情的解释?
2021-03-25 13:08:57

试试这个:

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"'>Your Download</a>";
document.getElementById('test').click();

如果要设置download锚标记的文件名使用属性:

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"' download=yourfilename>Your Download</a>";
document.getElementById('test').click();
相当惊人……但我如何设置文件名?我得到了“下载”作为文件名,没有扩展名。
2021-04-08 13:08:57
@YanKingYindownload="filename"用作 A 标签的属性。
2021-04-13 13:08:57

您将需要服务器端功能才能为用户提供文本文件(javascript 是不够的)。您可以创建一个服务器端脚本来创建文件并使用 javascript 来提示用户保存它。