How To Save Text As a File in HTML CSS and JavaScript? Last Updated : 16 Aug, 2024 Comments Improve Suggest changes Like Article Like Report In this tutorial, we will learn how to save user input as a text file using HTML, CSS, and JavaScript. This can be particularly useful for web applications where users need to download their input or notes as a file.Project PreviewWe will build a simple web page that allows users to enter text in a text area and download it as a .txt file when they click a button.ApproachMake a basic structure of the project in HTML using h1 and h3 tag for main heading and sub-heading respectively.Make a textarea where user enter the text which they want to save as a text file using textarea element and make a button for save text file. Style all the elements through CSS.Add eventlistner on button when it clicks the file will download.Here we use Blob, type represents MIME type.Then, create Url.createObjectURL and create anchor tag and setting the attributes and their values.Example: This code provides a web interface where users can enter text and save it as a file. The HTML sets up a text area and a button, the CSS styles the layout and elements, and the JavaScript handles the file creation and download process. When the button is clicked, the text is saved as a .txt file using a Blob. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Save Text As A File</title> </head> <body> <div class="container"> <h1 class="gfg">GeeksforGeeks</h1> <h3>Please enter the text you want to save as a file </h3> <textarea name="text-area" id="text-area" cols="70" rows="20"> </textarea> <button id="btn-id" class="btn"> Click here to save the text </button> </div> <script src="script.js"></script> </body> </html> CSS /* style.css */ @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; } .container { height: 100vh; display: flex; flex-direction: column; background-color: blanchedalmond; justify-content: space-around; align-items: center; } button { height: 70px; width: 400px; border-radius: 45px; background-color: rgb(242, 196, 242); font-size: x-large; } .gfg { color: green; } Javascript // script.js let butto = document.querySelector("#btn-id") let text = document.querySelector("#text-area") // eventListener "click" on button butto.addEventListener("click", () => { let valueinput = text.value let blobdtMIME = new Blob([valueinput], { type: "text/plain" }) let url = URL.createObjectURL(blobdtMIME) let anele = document.createElement("a") anele.setAttribute("download", "Downloaded Successfully"); anele.href = url; anele.click(); console.log(blobdtMIME) }) Output Comment More infoAdvertise with us Next Article How To Save Text As a File in HTML CSS and JavaScript? S shivanigupta18rk Follow Improve Article Tags : JavaScript Web Technologies HTML-Questions CSS-Questions JavaScript-Questions +1 More Similar Reads How to add HTML and CSS into PDF File ? HTML and CSS are regularly converted into PDF format during web development. PDFs enable the creation of printable documents, information exchange across several platforms, and preserving a webpage's original layout. Several JavaScript libraries can help us to complete our tasks. Libraries like html 3 min read How to Include CSS Inside a JavaScript File? Here are the various ways to include CSS inside a JavaScript file.1. Using style Property (Inline Styling)The simplest way to include CSS in JavaScript is by directly modifying the style property of an HTML element. This method applies styles inline, directly to the elements, and overrides any exter 4 min read How to make Live Coding Editor using HTML CSS and JavaScript ? In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.Final OutputPrerequisiteHTMLCSSJavaScriptAppr 3 min read How to load the contents of a text file into a JavaScript variable? In this article, we will examine how to read the contents of any text file that exists on your computer into a variable using JavaScript. The following are a few basic pointers that everybody should brush through before looking at the code: Event listeners: These are predefined functions that exist 3 min read JavaScript Program to write data in a text File To write data to a text file using JavaScript in a Node.js environment, the built-in fs (File System) module provides efficient file operations. It supports reading, writing, appending, and deleting files, making it a powerful tool for handling file-related tasks in Node.js.Used Function:The writeFi 3 min read Create a website using HTML CSS and JavaScript that stores data in Firebase Following are some simple steps in order to connect our static Web Page with Firebase. Step-by-Step ImplementationStep 1: Firstly, We are going to create a project on Firebase to connect our static web page. Visit the Firebase page to configure your project. Visit the website and click the On Add P 3 min read Design a Survey Form using HTML CSS and JavaScript In this article, we are going to implement a survey form using HTML, CSS, and JavaScript. In this form, we will get data about the interest of people in sports. In this implementation, the data will be stored in a CSV file after successful form validations. Preview of final output: Let us have a loo 5 min read How To Build Notes App Using Html CSS JavaScript ? In this article, we are going to learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you improve your practical knowledge in HTML, CSS, and JavaScript. In this notes app, we can save the notes as titles and descriptions in the local storage, so the notes will stay t 4 min read How to Create a New Line in JavaScript ? A new line can be made in JavaScript using the below-discussed methods.Using Escape Sequence `\n`The \n escape sequence represents a newline character in JavaScript strings and it can used to render a new line in JavaScript.JavaScriptconsole.log("GfG"); console.log("\n"); // New line console.log("Co 2 min read How to Save Data in Local Storage in JavaScript? LocalStorage is a client-side web storage mechanism provided by JavaScript, which allows developers to store key-value pairs directly in the user's browser. Unlike cookies, LocalStorage is persistentâdata stored remains even after the browser is closed and reopened, making it ideal for retaining use 2 min read Like