在文件保护程序.js中保存文件后关闭窗口

close window after file save in FileSaver.js

本文关键字：窗口 保存文件 文件保护 程序 js      更新时间：2023-09-26

我正在使用FileSaver.js文件将画布保存到图像中。下载后我必须关闭窗口。有什么办法可以做到这一点吗？

这是我尝试过的代码，

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

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

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

这是他们为 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();
});

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

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

FileSaver.js 在本机不支持它的浏览器中实现了 HTML5 W3C saveAs（） FileSaver 接口。

链接页面指向文件保存器的规范，说它支持以下重要事件：

函数类型写结束

写入结束事件的处理程序。

这就是您需要使用的。 保存操作，就像 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 页面所示，并假设如果它已经完成，它将干净地退出。 然后做一个窗口。

您可能想尝试以下版本的 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

相关文章：