How to detect download complete in javaScript - Stack Overflow

admin管理员组

文章数量:1336289

I want to execute two operations in one javaScript function

1. force download of a csv file

2. send an ajax request to mark records in table that records were downloaded.

Since both of these operations will present the user with prompts and dialogue boxes, I want to delay execution of the 2nd event until the first event is plete.

When the user opens the page, they are presented with a list of current records. They check records they wish to process. The checked records are then packaged and the user is presented with the download "Save" or "Open" box. when that operation is plete then the ajax request should execute.

My thought was I could detect when "a" was removed from the document. But I'm not sure how I would do that.

Here is my code for the download

    var a = window.document.createElement('a');
    a.href = window.URL.createObjectURL(new Blob(exportArray, {type: 'text/csv'}));
    a.download = 'jobCostHandOff.csv';

    // Append anchor to body.
    document.body.appendChild(a)
    a.click();

    // Remove anchor from body
    document.body.removeChild(a)

I want to execute two operations in one javaScript function

1. force download of a csv file

2. send an ajax request to mark records in table that records were downloaded.

Since both of these operations will present the user with prompts and dialogue boxes, I want to delay execution of the 2nd event until the first event is plete.

When the user opens the page, they are presented with a list of current records. They check records they wish to process. The checked records are then packaged and the user is presented with the download "Save" or "Open" box. when that operation is plete then the ajax request should execute.

My thought was I could detect when "a" was removed from the document. But I'm not sure how I would do that.

Here is my code for the download

    var a = window.document.createElement('a');
    a.href = window.URL.createObjectURL(new Blob(exportArray, {type: 'text/csv'}));
    a.download = 'jobCostHandOff.csv';

    // Append anchor to body.
    document.body.appendChild(a)
    a.click();

    // Remove anchor from body
    document.body.removeChild(a)

• javascript

Share Follow asked Nov 2, 2016 at 16:31 ClausClaus 55022 gold badges99 silver badges2020 bronze badges 6

• maybe take a look at this: stackoverflow./questions/1106377/… – David Commented Nov 2, 2016 at 16:36
• 1 good suggestion but it uses cookies from the server. In my example there is no server interaction. – Claus Commented Nov 2, 2016 at 16:51
• @Claus: you mentioned an Ajax call, that's what led me, for one, to assume that there was a server interaction. – AbVog Commented Nov 2, 2016 at 17:20
• Yes you are correct in that respect. I could place a cookie, but I'm not downloading from the server. What I really need is a response from the download dialogue box. The generated content on the client machine is being downloaded to the users hard drive. So I need to know not only when the download is plete, but also that the user did not select Cancel from the choices on the download dialogue box before I make the ajax call to mark the selected records. I think what I need is not available, so I'm going with two buttons. One for export and the second for Mark Records. – Claus Commented Nov 2, 2016 at 17:46
• OK, I understand now. If there's time in your schedule, I would suggest a custom dialog, which is pretty mon these days on Web pages. That would give you full control and yet feel familiar to the user: I don't know of a way for you to sort of query the download dialog of the browser. Note that Chrome for instance has no such dialog. However, I don't see how "knowing when the download is plete" would be possible, even with server munication (as I said in my proposed initial answer). – AbVog Commented Nov 2, 2016 at 18:09

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 2

I have implemented such a mechanism in a web application with the following workflow:

• the user selects a file on their puter
• they configure options of the app
• they click the submit button
• a loader starts animating client-side
• the browser send the entire form to the server for processing
• the processing (which is actually about converting a guitar score to a tablature) yields a text/plain file, which is stored on the server (but not sent yet): a small JSON with the link to the generated file is sent back. That JSON data represents either success or error. In the case of error, the message is displayed to the user. In the case of success, the status field is set to OK and the payload contains the link to the file.
• the JS code handling the AJAX call, upon success, triggers the download.
• the browser presents the user with the usual (e.g. in Firefox) "open or save file" dialog
• the web app detects the opening of the dialog and hides the loader.

It seems pretty similar to your need.

The gist of the solution is this:

• triggering the file download is done by setting the src attribute of an iframe hidden in the page
• the server sends a cookie in response to the request for the file to be downloaded
• a JS code on a timer inspects the cookies of the document (which, very fortunately, includes the cookies to the iframe) and upon seeing "the Holy cookie", knows for sure that the file download has started, which is the only event the code can grab.

Quickly looking through the PHP code of my web app, I see this:

// This cookie is for the jQuery.fileDownload plugin
header('Set-Cookie: fileDownload=true; path=/');

You have the name of the JS code that does the last bullet point item in the code ment :-) Another reason among the myriad of reasons why I write mented code...

HTH.

本文标签： How to detect download complete in javaScriptStack Overflow