Merge remote files using JavaScript

Question

I have a question. Suppose that I have 2 files on remote site.

http://example.com/path/to/file1.txt
http://example.com/path/to/file2.txt

Is it possible to be merged before letting the user download it?

file1.txt

This is the content in file1.txt

file2.txt

But this is the content in file2.txt

merged_file.txt (The file that the user will get)

This is the content in file1.txt
But this is the content in file2.txt

Follow up questions

If possible: can it be merged if the remote files have Content-Disposition: attachment as a header?
If impossible: can it be zipped together and let the user download a single file instead of multiple text files?

Use JavaScript / AJAX to asynchronously download both the files, assemble them, then [do something like this](https://stackoverflow.com/a/21016088/1790644) to allow the user to download it. — Matt Clark, Mar 25 '20 at 14:51
@HereticMonkey Merging is of course possible. But how do you zip them in browser? — glinda93, Mar 25 '20 at 14:52
@bravemaster [How to Zip files using JavaScript?](https://stackoverflow.com/q/8608724/215552) — Heretic Monkey, Mar 25 '20 at 14:54
@MattClark Thanks. I have a question (for clarity) at `download both the files`: does this means you have to save the files on the sever first? — TacticalBacon, Mar 25 '20 at 14:59
@TacticalBacon No, it is not necesary, you do not need to save it into server or into local disk before, you download both files into client browser memory and generate the zip into a blob into client browser like MattClark and Heretic Monkey described, it's HTML5 amazing magic. It's like mega web does: it downloads (and decrypts) data before into memory and then a save dialog appears. — user1039663, Mar 25 '20 at 15:06
Also, about jszip, the answer that was removed because didn't even credit the comments: in that answer the user used the nodejs code, be very cautious about using an example for the client's browser. — user1039663, Mar 25 '20 at 15:10

Matt Clark · Accepted Answer · 2020-03-25T15:32:39.173

Use something like this to download the contents of each file, load them into an array, then act on the array when all the files are done downloading. It wil require s ome more logic to assemble the files and to make sure all the files are actually done downloading, but it is possible.

function dl(target, callback) {

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            callback(xhr.responseText);
        }
    }
    xhr.open("GET", target, true);
    xhr.send();
}

dl("file_a", onDone);
dl("file_b", onDone);

document.files = new Array();
function onDone(data) {

    document.files.push(data);
}

Then use something like this to download the files from the JS cache to the users desktop.

function download() {

    var hiddenElement = document.createElement('a');

    hiddenElement.href = 'data:attachment/text,' + encodeURI(document.files);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'in-line.txt';
    hiddenElement.click();
}

Merge remote files using JavaScript

1 Answers1