How to Create and Save Text File in JavaScript
Hi to all, in this article I am going to tell you all about how to create and save text file in JavaScript.
You know that we can convert any text in to a file and can download it in various formats like html, css, txt, ppt, docs etc. by using vanilla JavaScript.
If you are interested to test this, then scroll till down to the demo heading, to test the tool and if any modifications needed, you can suggest us through contact page or email.
Working Flow:
First of all, you have to enter the required text in the textarea box and then you have to enter the file name and then after need to select the format of the text file and then click on save as text button and the file will be downloaded in your computer.
Before clicking on the button, make sure that you have selected the desired format of the file, which you wan to download.
Steps to Create Project
First of all, you need any code editor, here I am using VS Code to edit the file and then follow below provided steps carefully:
Step-1: Here you have to create three files inside the Vs code or any other code editor.
For Example: .HTML, .CSS and .Js (JavaScript) files.
Step-2: After you create the three files successfully, now it's time to paste the following codes, respective to their file name.
Step-3: Now, we will go first with HTML file, here you can add any file name like index.html or file.html and one thing you must remember that the extension you are giving to the file must be in .html format only.
Now you have to copy below provided HTML code and add it in the HTML file.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<textarea spellcheck="false" placeholder="Type something to save" required></textarea>
<div class="file-options">
<div class="option file-name">
<label>File name</label>
<input type="text" spellcheck="false" placeholder="Enter file name">
</div>
<div class="option save-as">
<label>Save as</label>
<div class="select-menu">
<select>
<option value="text/plain">Text File (.txt)</option>
<option value="text/javascript">JS File (.js)</option>
<option value="text/html">HTML File (.html)</option>
<option value="image/svg+xml">SVG File (.svg)</option>
<option value="application/msword">Doc File (.doc)</option>
<option value="application/vnd.ms-powerpoint">PPT File (.ppt)</option>
</select>
</div>
</div>
</div>
<button class="save-btn" type="button">Save As Text File</button>
</div>
</body>
</html>
Step-4: Now, we will go second with CSS file, here you can add any file name like style.css or file.css and one thing you must remember that the extension you are giving to the file must be in .css format only.
Now you have to copy below provided CSS code and add it in the CSS file.
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}
body{display: flex;align-items: center;justify-content: center;min-height: 100vh;padding: 10px;background: #17A2B8;}
.wrapper{width: 443px;border-radius: 7px;background: #fff;padding: 30px 25px 40px;box-shadow: 0 10px 15px rgba(0,0,0,0.05);}
.wrapper :where(textarea, input, select, button){width: 100%;outline: none;border: none;font-size: 17px;border-radius: 5px;}
.wrapper :where(textarea, input)::placeholder{color: #aaa;}
.wrapper :where(textarea, input):focus{box-shadow: 0px 2px 4px rgba(0,0,0,0.08);}
.wrapper textarea{height: 270px;resize: none;padding: 8px 13px;font-size: 17.6px;border: 1px solid #ccc;}
.wrapper .file-options{display: flex;margin-top: 10px;align-items: center;justify-content: space-between;}
.file-options .option{width: calc(100% / 2 - 8px);}.option label{font-size: 17px;}.option :where(input, .select-menu){height: 50px;padding: 0 13px;margin-top: 6px;border-radius: 5px;border: 1px solid #bfbfbf;}.option .select-menu select{height: 50px;background: none;}.wrapper .save-btn{color: #fff;cursor: pointer;opacity: 0.6;padding: 16px 0;margin-top: 20px;pointer-events: none;background: #17A2B8;}.save-btn:hover{background: #148c9f;}textarea:valid ~ .save-btn{opacity: 1;pointer-events: auto;transition: all 0.3s ease;}@media screen and (max-width: 475px) {.wrapper{padding: 25px 18px 30px;}.wrapper :where(textarea, input, select, button, label){font-size: 16px!important;}.file-options .option{width: calc(100% / 2 - 5px);}.option :where(input, .select-menu){padding: 0 10px;}.wrapper .save-btn{padding: 15px 0;}}
Step-5: Now, we will go second with JavaScript file, here you can add any file name like script.js or file.js and one thing you must remember that the extension you are giving to the file must be in .js format only.
Now you have to copy below provided CSS code and add it in the JavaScript file.
const textarea = document.querySelector("textarea"),
fileNameInput = document.querySelector(".file-name input"),
selectMenu = document.querySelector(".save-as select"),
saveBtn = document.querySelector(".save-btn");
selectMenu.addEventListener("change", () => {
const selectedFormat = selectMenu.options[selectMenu.selectedIndex].text;
saveBtn.innerText = `Save As ${selectedFormat.split(" ")[0]} File`;
});
saveBtn.addEventListener("click", () => {
const blob = new Blob([textarea.value], {type: selectMenu.value});
const fileUrl = URL.createObjectURL(blob);
const link = document.createElement("a");
link.download = fileNameInput.value;
link.href = fileUrl;
link.click();
});
Step-6: Now after adding all the three codes, in their respective file, now you have to run and check, whether the code is working or not and even you can test the demo of the save as text generator from below demo section.
Check the Project Demo
Conclusion
I hope that you all, have understood about create and save text file in JavaScript easily without any issue, if you get any issue, then pleas contact us through mail or through contact page.
