在 FileSaver.js 中保存文件后关闭窗口答案

【问题标题】：close window after file save in FileSaver.js在 FileSaver.js 中保存文件后关闭窗口
【发布时间】：2013-10-31 13:27:47
【问题描述】：

我正在使用FileSaver.js 文件将我的画布保存为图像。下载后我必须关闭窗口。有什么方法可以实现吗？

这是我尝试过的代码，

canvas.toBlob(function (blob) {
    saveAs(blob, "RQGantt.png");
    window.close();
});

它适用于小尺寸图像。但是当我有大尺寸的图像时，我的窗口在开始下载之前就关闭了。

有没有办法在客户端做到这一点？

【问题讨论】：

也许你应该在 GitHub 页面上发布问题。开发人员在那里似乎很活跃：github.com/eligrey/FileSaver.js/issues?state=open - 通常这种事情是在“onComplete”风格的回调中处理的，但是如果没有进入插件本身的源代码，我无法告诉你是否存在这样的回调或不是。
为什么不在你的“saveAs”函数中添加一个回调函数，这样窗口只有在saveAs函数完成后才关闭？例如jsfiddle.net/gH8FY

标签： javascript canvas

【解决方案1】：

这是他们为https://github.com/eligrey/FileSaver.js/issues/52 问题提供的回复。

不幸的是，JS 无法判断文件何时完成保存，因此用户将不得不关闭它可能为保存内容而创建的新标签。

所以，我做了以下解决方法

window.onbeforeunload = function () {
    //For IE
    if (HTMLCanvasElement.prototype.msToBlob && window["ganttBlob"])
        saveAs(ganttBlob, "imageName.png");
}

canvas.toBlob(function (blob) {
    window.ganttBlob = blob;
    // For Non IE Browser
    if (!canvas.msToBlob) {
        saveAs(blob, "imageName.png");
        setTimeout(function () {
            window.close();
        }, 500);
    }
    else //For IE
        window.close();
});

所以，现在即使窗口已经关闭，也会出现下载提示选项。

【讨论】：

【解决方案2】：

您提供的链接中的页面显示：

FileSaver.js 在本身不支持它的浏览器中实现 HTML5 W3C saveAs() FileSaver 接口。

指向文件保护程序规范的链接页面表示它支持以下重要事件：

函数类型的onwriteend

writeend 事件的处理程序。

这就是你需要使用的。与 javascript 中最重要的事情一样，保存操作是一个异步事件。

你想捕捉写操作的结束，然后关闭窗口：

canvas.toBlob(function (blob) {
    var filesaver = saveAs(blob, "RQGantt.png");
    filesaver.onwriteend = function() { window.close(); }
}

编辑

很遗憾，这似乎不可用。见：https://github.com/eligrey/FileSaver.js/issues/1

也许你可以要求插件的作者重新审视这个问题。

我能建议的最好的方法是添加一个让用户单击关闭的按钮。单击时，您可以调用 abort，如 github 页面所示，并假设如果它已经完成，它将干净地退出。然后做一个 window.close。

【讨论】：

【解决方案3】：

您可能想尝试以下版本的 FileSaver.js：https://github.com/graingert/FileSaver.js/commit/db6a69e6f072901c2f00a4461136e38c58e082b1

结合这个语法：

blob = new Blob([icsFileContents], {type: "application/octet-stream;charset=utf-8"});

var fileSaver = saveAs(blob, "calEvent.ics").onwriteend = function() {
    setTimeout(function() { window.close(); }, 250);
};

我还没有测试过大文件，虽然我在慢速 3G 连接上进行了测试，它在关闭之前等待文件被写入和下载。

来源：https://github.com/eligrey/FileSaver.js/issues/1

【讨论】：