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

Question

我正在使用FileSaver.js文件将画布保存为图像。下载完成后，我必须关闭窗口。有没有办法实现这一点？

以下是我尝试过的代码：

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

当使用小尺寸的图像时，它可以正常工作。但是当我使用大尺寸的图像时，在开始下载之前我的窗口就关闭了。

有没有办法在客户端解决这个问题？

- Rajagopal 웃

---

也许你应该在 GitHub 页面上发布一个问题。开发者似乎很活跃：https://github.com/eligrey/FileSaver.js/issues?state=open - 通常这种情况会在“onComplete”样式回调中处理，但是如果没有查看插件本身的源代码，我无法告诉你是否存在这样的回调。 - Dan Hanly

为什么不在你的“saveAs”函数中添加一个回调函数，以便窗口只有在“saveAs”函数完成后才关闭？例如：http://jsfiddle.net/gH8FY/ - Latheesan

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

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

- Rajagopal 웃

Answer 2

您提供的链接页面上写道：

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

指向 filesaver 规范的链接页面上写道，它支持以下重要事件：

onwriteend 类型为 Function

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。

- Scott Mermelstein

Answer 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

- Joe Coyle