下面是一个将文件导出为ZIP的教程:

在开始之前，有一个库来保存文件，库的名字是filesver .js，你可以在这里找到这个库。让我们开始吧，现在，包括所需的库:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

现在复制这段代码，这段代码将下载一个带有Hello .txt文件的zip文件，其中包含Hello World的内容。如果一切正常，这将下载一个文件。

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

这将下载一个名为file.zip的文件。你可以在这里阅读更多:http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library

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();
    }
}

使用

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

对于像“txt”或“js”这样的简单文件，您可以使用fs-浏览器包。 它有很好的和简单的下载和导出方法的客户端，不涉及任何服务器。

import {exportFile} from 'fs-browsers'; const onExportClick = (textToExport) => { //导出到txt文件 exportFile (textToExport); ｝

如果你想改变文件的名称，甚至它的类型，你可以很容易地用这个:

import {exportFile} from 'fs-browsers'; const onExportClick = (textToExport) => { //导出到js文件file.js exportFile(textToExport， {fileName: 'file.js'}); ｝

对于更复杂的文件，您将需要使用服务器。 如果这是你需要的，这个包也可以对excel文件('xls')这样做。

import {exportFile, EXCEL_FILE} from 'fs-browsers'; 常量数据= [{" id ": 5,“名字”:“约翰”,“等级”:90年,“年龄”:15},{" id ": 7,“名字”:“尼克”、“年级”:70年,“年龄”:17}); const heading =["学号"，"学生姓名"，"考试等级"，"学生年龄"]; exportFile(数据，{类型:EXCEL_FILE，标题:标题，文件名:'grades.xls'});

也许将来还会有其他类型的文件。

看看Doug Neiner的downadify，这是一个基于Flash的JavaScript界面。

downloadadify是一个很小的JavaScript + Flash库，可以在浏览器中生成和保存文件，而不需要服务器交互。

保存大文件

Long data URIs can give performance problems in browsers. Another option to save client-side generated files, is to put their contents in a Blob (or File) object and create a download link using URL.createObjectURL(blob). This returns an URL that can be used to retrieve the contents of the blob. The blob is stored inside the browser until either URL.revokeObjectURL() is called on the URL or the document that created it is closed. Most web browsers have support for object URLs, Opera Mini is the only one that does not support them.

强制下载

If the data is text or an image, the browser can open the file, instead of saving it to disk. To cause the file to be downloaded upon clicking the link, you can use the the download attribute. However, not all web browsers have support for the download attribute. Another option is to use application/octet-stream as the file's mime-type, but this causes the file to be presented as a binary blob which is especially user-unfriendly if you don't or can't specify a filename. See also 'Force to open "Save As..." popup open at text link click for pdf in HTML'.

指定文件名

如果blob是用File构造函数创建的，你也可以设置一个文件名，但只有少数web浏览器(包括Chrome和Firefox)支持File构造函数。文件名也可以指定为download属性的参数，但这需要考虑大量的安全问题。Internet Explorer 10和11提供了自己的方法msSaveBlob来指定文件名。

示例代码

var file; var data = []; data.push("This is a test\n"); data.push("Of creating a file\n"); data.push("In a browser\n"); var properties = {type: 'text/plain'}; // Specify the file's mime-type. try { // Specify the filename using the File constructor, but ... file = new File(data, "file.txt", properties); } catch (e) { // ... fall back to the Blob constructor if that isn't supported. file = new Blob(data, properties); } var url = URL.createObjectURL(file); document.getElementById('link').href = url; <a id="link" target="_blank" download="file.txt">Download</a>

如前所述，文件API以及FileWriter和FileSystem API可用于从浏览器选项卡/窗口的上下文中在客户端机器上存储文件。

然而，关于后两个api，有几件事你应该知道:

Implementations of the APIs currently exist only in Chromium-based browsers (Chrome & Opera) Both of the APIs were taken off of the W3C standards track on April 24, 2014, and as of now are proprietary Removal of the (now proprietary) APIs from implementing browsers in the future is a possibility A sandbox (a location on disk outside of which files can produce no effect) is used to store the files created with the APIs A virtual file system (a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser) is used represent the files created with the APIs

下面是一些简单的例子，说明了如何直接或间接地使用api来实现这一点:

烘焙食品*

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

使用原始的文件、FileWriter和文件系统api

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

尽管FileSystem和FileWriter api已经不在标准轨道上，但在某些情况下，它们的使用是合理的，在我看来，因为:

未实现的浏览器供应商重新燃起的兴趣可能会让他们重新回到这个平台上 实现(基于chromium的)浏览器的市场渗透率很高 谷歌(Chromium的主要贡献者)没有给出api的生命终止日期

然而，“某些情况”是否包括你自己的情况，由你自己决定。

*BakedGoods是由这里的这个家伙维护的:)