Combining distant documents using JavaScript

Question

Combining distant documents using JavaScript

I have a question regarding merging files on a remote site. Let's say there are 2 files stored at the following locations:

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

Is it possible to merge these files before allowing the user to download them?

File 1: file1.txt

This is the content in file1.txt

File 2: file2.txt

But this is the content in file2.txt

Merged File: merged_file.txt (The file that will be presented to the user for download)

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

Follow-up Questions:

If the remote files have Content-Disposition: attachment as a header, is it still possible to merge them?
If merging is not feasible, can the files be combined into a single downloadable ZIP file instead of multiple text files?

javascript

Answer 1

Answer №1

To easily download the contents of multiple files, you can use a technique like this where each file is loaded into an array and action is taken once all the files have finished downloading. Additional logic will be needed to organize the files properly and ensure that all the downloads are complete.

function fetchFile(target, callback) {

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

fetchFile("file_a", onFetchComplete);
fetchFile("file_b", onFetchComplete);

document.loadedFiles = [];

function onFetchComplete(data) {

    document.loadedFiles.push(data);
}

You can then utilize a method similar to this to transfer the downloaded files from the JavaScript cache to the user's desktop.

function initiateDownload() {

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

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

Answer 2

To easily download the contents of multiple files, you can use a technique like this where each file is loaded into an array and action is taken once all the files have finished downloading. Additional logic will be needed to organize the files properly and ensure that all the downloads are complete.

function fetchFile(target, callback) {

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

fetchFile("file_a", onFetchComplete);
fetchFile("file_b", onFetchComplete);

document.loadedFiles = [];

function onFetchComplete(data) {

    document.loadedFiles.push(data);
}

You can then utilize a method similar to this to transfer the downloaded files from the JavaScript cache to the user's desktop.

function initiateDownload() {

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

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

Combining distant documents using JavaScript

Answer №1

Similar questions

Do not include objects in the search results that lack necessary information

Creating multifunctional arrays in HTML tables

Generate Array of Consecutive Dates using JavaScript

Obtain the text content within a textarea using jQuery

Terser is causing ng build --prod to fail

Tips on storing the amount of time a user devotes to answering questions on my form into a database

Show personalized information in a title tooltip

The input of type 'string' cannot be assigned to type 'ChartType'

Select elements from a PHP loop

Retrieve information using server-side rendering

Sorting through a JavaScript array

SuperAgent - Refresh the initial request with a new bearer token upon encountering unauthorized access

Connect user input to a predefined value within an object

Strange response received from Stack Overflow API request

Browser Compatibility with AngularJS

No data was submitted with the HTML form post request in the formData object

What is the best way to display my 'React Loading Spinner' component at the center of my view?

Currently, I am utilizing a Google script to import my emails into a spreadsheet. I am seeking help in identifying and fixing a duplication issue that

Creating an animated link with a dynamic underline featuring a trio of vibrant colors

The Bootstrap carousel refuses to slide when new dynamic data is introduced