close window after file save in FileSaver.js

Question

I am using the FileSaver.js file to save my canvas to image. I have to close the window after download. Is there any way to achieve this?

Here is my code what i have tried,

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

It's works fine with small size of image. But my window closed before it's start downloading when i have a large size of image.

Is there any way to do this in client side?

Answer 1

Here is response they have provided for https://github.com/eligrey/FileSaver.js/issues/52 issue.

Unfortunately, JS can't tell when the file has finished saving so the user will have to close new tabs it may make for content being saved.

So, I have made a following workaround

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

So, now even the window has been closed, download prompt option will comes.

Answer 2

The page in the link you provided says:

FileSaver.js implements the HTML5 W3C saveAs() FileSaver interface in browsers that do not natively support it.

The linked page, pointing to the spec for filesaver, says it supports the following significant event:

onwriteend of type Function

Handler for writeend events.

That's what you need to use. The save operation, like most significant things in javascript, is an asynchronous event.

You want to catch the end of the write operation, and then close the window:

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

EDIT

Unfortunately, it looks like this isn't available. See: https://github.com/eligrey/FileSaver.js/issues/1

Perhaps you can ask the writer of the plugin to revisit the issue.

The best I can suggest is add a button that lets the user click to close. On click, you can call abort, as shown in the github page, and assume it will exit cleanly if it's already finished. Then do a window.close.

Answer 3

You may want to try the following version of FileSaver.js: https://github.com/graingert/FileSaver.js/commit/db6a69e6f072901c2f00a4461136e38c58e082b1

Combined with this syntax:

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

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

I haven't tested on large files, though I did test on a Slow 3G connection and it waited for the file to be written & downloaded before closing.

Source: https://github.com/eligrey/FileSaver.js/issues/1