Javascript: Save a text/blob to a file using FileSaver.js

Question

I have built 2 buttons Yes and No.

I want to save the answer in a file: Yes or No (of course depend on the button that the end-user will press)

I've already used the Javascript object blob but is not working:

The file testfile1.txt wasn't generated.

I have a subfolder (inside my main folder) named js in which I have the file FileSaver.js.

For this reason, I have:

`src="js/FileSaver.js"`

Implemented in my code. Below my code:

<!doctype html>
<html lang="en">
<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="js/FileSaver.js"></script>
</head>

<body>
<button id="save-btn"> yes </button>
<button id="save-btn1"> no </button>
<script>
$("save-btn").click(function{

var blob= new Blob(["yes"],
{type:"text/plain;charset=utf-8"}
);
saveAs(blob,"testfile1.txt");
});
$("save-btn1").click(function{

var blob= new Blob(["no"],
{type:"text/plain;charset=utf-8"}
);
saveAs(blob,"testfile1.txt");
});
</script>

</body>
</html>

Thanks in advance

You're going to have to share the content of FileSaver.js, or at least the function definition for saveAs(). — BenM
– BenM, Commented Jul 29, 2019 at 10:19
Danger jQuery 1.9.1 has known security issues. The jQuery 1.x series is no longer supported. It does not get security fixes. Upgrade to a supported version of jQuery. — Quentin
– Quentin, Commented Jul 29, 2019 at 10:29
not working isn't a useful description of the problem. What happens? How is this different from what you expect? What error messages are reported in the Console of the Developer Tools? — Quentin
– Quentin, Commented Jul 29, 2019 at 10:32

Ishara Amarasekera · Accepted Answer · 2019-07-29 11:38:42Z

Please check this out.

I did a modification to your code this way.

*** Note : I imported the FileSaver.js (downloaded from here) and wrote the button click functions in a different js file (test.js)

This is my code and using this I am able to download a text file with input data each time when I click on the Yes or No button.

test.html

<head>
<body>
    <button type="button" id="yesButton" value="Yes" onclick="saveYesInputDatataToFile();">Yes</button>
    <button type="button" id="noButton" value="No" onclick="saveNoInputDataToile();">No</button>
    <script src="test.js"></script>
    <script src="FileSaver.js"></script>
</body>
</head>

test.js

function saveYesInputDatataToFile() {
    var userInput = document.getElementById("yesButton").value;
    var blob = new Blob([userInput],
    { type: "text/plain;charset=utf-8" });
    saveAs(blob, "userInput.txt");
}

function saveNoInputDataToile() {
    var userInput = document.getElementById("noButton").value;
    var blob = new Blob([userInput],
    { type: "text/plain;charset=utf-8" });
    saveAs(blob, "userInput.txt");
}

kainian yin · Accepted Answer · 2019-07-29 10:45:45Z

0

You can implement you function as bellow:

let content = 'abc';
const url = window.URL.createObjectURL(new Blob([content], {type: 'text/plain'}));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'log.txt'); //or any other extension
document.body.appendChild(link);
link.click();

I've tested it in my chrome broswer.

answered Jul 29, 2019 at 10:45

kainian yin

514 bronze badges

Collectives™ on Stack Overflow

Javascript: Save a text/blob to a file using FileSaver.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related