Question

我使用FileSaver.js文件将画布保存到图像。下载后我必须关闭窗口。有没有办法实现这个目标？

这是我的代码，我尝试过，

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

图像尺寸小，效果很好。但是当我有一个大尺寸的图像时，我的窗口在它开始下载之前关闭了。

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

Answer 1

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

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

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

函数类型
的onwriteend
写作活动的处理程序。

这就是你需要使用的东西。与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。

Answer 2

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

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

Answer 3

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

结合以下语法：

import '@/assets/css/reset.css'

我没有在大文件上进行测试，尽管我在3G慢速连接上进行了测试，并且它等待文件写入并下载后再关闭。

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

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

3 个答案: