How to Save Text as File using HTML5, CSS3 & JavaScript

In this tutorial, I will teach you how to save the text as a file using HTML5, CSS3 & JavaScript. The complete source code of this JavaScript save text as file project is given below.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Save Text As File using JavaScript</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <textarea spellcheck="false" placeholder="Enter something to save" required>Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsuam has been the industries standard dummy texts ever since this 1500s, when an unknown printer took a galley of type and scrambled it to make a type of dollar specimen book. It have survived not only five centuries, but also from the leap into electronic typesetting.</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>

script.js

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();
});

style.css

/* Import Google font - Poppins */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  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;
  }
  .file-options .option{
    width: calc(100% / 2 - 5px);
  }
  .option :where(input, .select-menu){
    padding: 0 10px;
  }
  .wrapper .save-btn{
    padding: 15px 0;
  }
}

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.