使用HTML5 / JavaScript生成并保存文件

本文翻译自：Using HTML5/JavaScript to generate and save a file

I've been fiddling with WebGL lately, and have gotten a Collada reader working. 我最近一直在摆弄WebGL，并让Collada阅读器工作。 Problem is it's pretty slow (Collada is a very verbose format), so I'm going to start converting files to a easier to use format (probably JSON). 问题是它相当慢（Collada是一种非常冗长的格式），所以我将开始将文件转换为更易于使用的格式（可能是JSON）。 I already have the code to parse the file in JavaScript, so I may as well use it as my exporter too! 我已经有了使用JavaScript解析文件的代码，因此我也可以将其用作导出器！ The problem is saving. 问题正在保存。

Now, I know that I can parse the file, send the result to the server, and have the browser request the file back from the server as a download. 现在，我知道我可以解析文件，将结果发送到服务器，然后让浏览器从服务器请求文件下载作为下载。 But in reality the server has nothing to do with this particular process, so why get it involved? 但是实际上，服务器与此特定过程无关，那么为什么要参与其中呢？ I already have the contents of the desired file in memory. 我已经在内存中保存了所需文件的内容。 Is there any way that I could present the user with a download using pure JavaScript? 有什么办法可以使用户使用纯JavaScript进行下载？ (I doubt it, but might as well ask...) （我对此表示怀疑，但也可能会问...）

And to be clear: I am not trying to access the filesystem without the users knowledge! 需要明确的是：我不会在用户不知情的情况下访问文件系统！ The user will provide a file (probably via drag and drop), the script will transform the file in memory, and the user will be prompted to download the result. 用户将提供一个文件（可能通过拖放操作），脚本将转换文件在内存中的位置，并提示用户下载结果。 All of which should be "safe" activities as far as the browser is concerned. 就浏览器而言，所有这些都应该是“安全”的活动。

[EDIT]: I didn't mention it upfront, so the posters who answered "Flash" are valid enough, but part of what I'm doing is an attempt to highlight what can be done with pure HTML5... so Flash is right out in my case. [编辑]：我没有提前提到它，所以回答“ Flash”的海报是足够有效的，但是我正在做的部分工作是试图强调使用纯HTML5可以完成的工作...因此Flash是就我而言。 (Though it's a perfectly valid answer for anyone doing a "real" web app.) That being the case it looks like I'm out of luck unless I want to involve the server. （尽管对于任何使用“真实” Web应用程序的人来说，这都是一个非常有效的答案。）在这种情况下，除非我不想让服务器参与其中，否则看起来我很不走运。 Thanks anyway! 不管怎么说，还是要谢谢你！

---

#1楼

参考：https://stackoom.com/question/C9nn/使用HTML-JavaScript生成并保存文件

---

#2楼

HTML5 defined a window.saveAs(blob, filename) method. HTML5定义了一个window.saveAs(blob, filename)方法。 It isn't supported by any browser right now. 目前没有任何浏览器支持。 But there is a compatibility library called FileSaver.js that adds this function to most modern browsers (including Internet Explorer 10+). 但是，有一个名为FileSaver.js的兼容性库，可以将该功能添加到大多数现代浏览器（包括Internet Explorer 10+）中。 Internet Explorer 10 supports a navigator.msSaveBlob(blob, filename) method ( MSDN ), which is used in FileSaver.js for Internet Explorer support. Internet Explorer 10支持navigator.msSaveBlob(blob, filename)方法（ MSDN ），该方法在FileSaver.js中用于Internet Explorer支持。

I wrote a blog posting with more details about this problem. 我写了一篇博客文章 ，详细介绍了这个问题。

---

#3楼

Simple solution for HTML5 ready browsers... 适用于HTML5的浏览器的简单解决方案...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Usage 用法

download('test.txt', 'Hello world!');

---

#4楼

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

---

#5楼

I've used FileSaver ( https://github.com/eligrey/FileSaver.js ) and it works just fine. 我用过FileSaver（ https://github.com/eligrey/FileSaver.js ），它工作得很好。
For example, I did this function to export logs displayed on a page. 例如，我执行此功能来导出页面上显示的日志。
You have to pass an array for the instanciation of the Blob, so I just maybe didn't write this the right way, but it works for me. 您必须为Blob的实例传递一个数组，所以我也许没有编写正确的方法，但是它对我有用。
Just in case, be careful with the replace: this is the syntax to make this global, otherwise it will only replace the first one he meets. 以防万一，请谨慎对待replace：这是将其全局化的语法，否则它将仅替换他遇到的第一个。

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/
/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

---

#6楼

I found two simple approaches that work for me. 我找到了两种对我有用的简单方法。 First, using an already clicked a element and injecting the download data. 首先，使用已经单击a元素并注入下载数据。 And second, generating an a element with the download data, executing a.click() and removing it again. 其次，使用下载数据生成a元素，执行a.click()并再次将其删除。 But the second approach works only if invoked by a user click action as well. 但是，第二种方法也只有在用户单击操作也被调用时才有效。 (Some) Browser block click() from other contexts like on loading or triggered after a timeout (setTimeout). （某些）浏览器会阻止其他上下文中的click() ，例如在加载时或在超时（setTimeout）之后触发。

  
    
    
   
  
    download
    download