How to Download a file with Textcontent with JS

Question

I was making a password generator website (which is for myself) and I was wondering if I could make a download button that downloads a .txt file and the generated password inside the file.

You can visit it here: https://astr-ghe.tk

This is my generate function code:

//generate random password
function generate(){

    //set password length/complexity
    let complexity = document.getElementById("slider").value;

    //possible password values
    let values = "ABCDEFGHIJKLMNOPQRSTUVWZYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()_+";

    let password = "";

    //create for loop to choose password characters
    for(var i = 0; i <= complexity; i++){
        password = password + values.charAt(Math.floor(Math.random() * Math.floor(values.length - 1)));
    }

    //add password to textbox/display area
    document.getElementById("display").value = password;

    //add password to previously generated passwords section
    document.getElementById("lastNums").innerHTML += password + "<br />";

}

You can probably use the answer here and pass the passwords you want as the text parameter with the function download() https://stackoverflow.com/a/18197341/10633285 — Nathan Champion, Jun 23 '20 at 13:25

Lewis · Accepted Answer · 2020-06-23T14:01:30.507

You can use the function written here to generate a text file and download it on click.

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

And then call download as needed, i.e. inside generate:

function generate() {

    let complexity = document.getElementById("slider").value;
    let values = "ABCDEFGHIJKLMNOPQRSTUVWZYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()_+";
    let password = "";

    for(var i = 0; i <= complexity; i++)
        password = password + values.charAt(
            Math.floor(Math.random() * Math.floor(values.length - 1))
        );
    
    download('password.txt', password);
}

This behavior is blocked by StackOverflow, please see this JSFiddle for an example.

The `download` function that neither of us wrote is the same, that's about it. The JSFiddle plugs it into OP's `generate` function for instance, you just copy-pasted that snippet. — Lewis, Jun 23 '20 at 13:58

score -1 · Answer 2 · answered Jun 23 '20 at 13:29

Of yourse is it possible. You can just create a function to generate a new anchor tag with an Download Link to the Filename you want. If you set the href of the link to the encoded text you want to download, it'll be downloaded in a file named as the download attribute with an Content of the href attribute

Demo

function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

<button onclick="download('password.txt','your Content here')">Download</button>

How to Download a file with Textcontent with JS

2 Answers2

Demo