Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • JS Tutorial
  • JS Exercise
  • JS Interview Questions
  • JS Array
  • JS String
  • JS Object
  • JS Operator
  • JS Date
  • JS Error
  • JS Projects
  • JS Set
  • JS Map
  • JS RegExp
  • JS Math
  • JS Number
  • JS Boolean
  • JS Examples
  • JS Free JS Course
  • JS A to Z Guide
  • JS Formatter
Open In App
Next Article:
How to Link JavaScript File to a Separate HTML File?
Next article icon

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 Preview

We 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.

savefilepreview

Approach

  • Make 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

ft


Next Article
How to Link JavaScript File to a Separate HTML File?

S
shivanigupta18rk
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • HTML-Questions
  • CSS-Questions
  • JavaScript-Questions

Similar Reads

  • How to Change Text Inside all HTML Tags using JavaScript ?
    In this article, we will learn how to change the text content inside all HTML tags using JavaScript. This skill is valuable when you need to dynamically modify the text displayed on a web page. which can be useful for various scenarios like updating content, internationalization, or creating dynamic
    3 min read
  • 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 exte
    4 min read
  • How to Convert Special Characters to HTML in JavaScript?
    In JavaScript, special characters like less-than (<), greater-than (>), and others can cause rendering issues in HTML because they are interpreted as tags. To display these characters correctly in HTML, it's necessary to convert them into their respective HTML entities. This process prevents t
    2 min read
  • How to Link JavaScript File to a Separate HTML File?
    Linking a JavaScript file to an HTML document establishes a connection between the two, allowing the execution of JavaScript code within the HTML page. This is typically done using the <script> tag in the HTML file, specifying the src attribute as the path to the JavaScript file. Below are the
    2 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 Output PrerequisiteHTMLCSSJavaScriptAp
    3 min read
  • How to append HTML code to a div using JavaScript ?
    Updating content on a webpage without reloading the entire page makes for a faster and smoother user experience. JavaScript allows you to do this by adding new HTML to elements like divs dynamically. There are four simple ways to add HTML to a div using JavaScript: Using the innerHTML Attribute Usin
    6 min read
  • How to create and download CSV file in JavaScript ?
    CSV (Comma-Separated Values) files are widely used for data transfer, analytics, and storage purposes. They allow you to easily fetch data from JavaScript or JSON objects and save it in a readable format for users, machine learning, or analytics tasks. In this article, we’ll explore how to convert d
    5 min read
  • How to Insert Spaces/Tabs in Text using HTML and CSS?
    When building web pages, controlling the spacing between elements and text is essential for creating visually appealing and well-structured content. HTML and CSS offer several ways to insert spaces and tabs in text. While HTML provides basic methods for adding spaces, CSS gives more control over lay
    4 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
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences