Html menyimpan input ke file teks

Tahukah Anda bahwa Anda dapat mengonversi teks apa pun menjadi file dan mengunduhnya dalam berbagai format seperti txt, html, css, docs, ppt, dll menggunakan JavaScript vanilla?

Table of Contents Show

Video Tutorial Menyimpan Teks Sebagai File di JavaScript
Anda mungkin menyukai proyek-proyek ini
Simpan Teks Sebagai File di JavaScript [Kode Sumber]
Bagaimana cara menyimpan nilai kotak teks ke. File TXT dalam HTML?
Bisakah HTML menulis ke file teks?
Bagaimana cara menyimpan data masukan dalam HTML?
Bagaimana cara menyimpan data yang dimasukkan dalam bentuk HTML?

Hai teman-teman, hari ini di blog ini, Anda akan belajar membuat proyek sederhana namun bermanfaat dan itu adalah cara menyimpan konten halaman web sebagai file menggunakan HTML CSS & JavaScript. Sebelumnya, saya membagikan blog tentang cara Mengonversi Teks ke Ucapan dalam JavaScript, dan kali ini saya ingin menunjukkan kepada Anda cara mengonversi teks menjadi file dan mengunduhnya dengan JavaScript. Jadi, mari kita mulai dengan proyeknya

Seperti yang telah Anda lihat pada gambar pratinjau, dalam proyek ini, ada kotak teks, kotak input, pilih opsi, dan tombol simpan. Saat Anda mengetik beberapa teks ke dalam kotak teks, pilih format file, dan tekan tombol "simpan", file baru akan disimpan di komputer Anda dengan teks yang dimasukkan di dalamnya. Nama file tidak wajib dan jika Anda tidak memberikannya, file akan disimpan dengan nama yang unik

Jika Anda penasaran untuk melihat demo langsung dari proyek ini, lihat di sini. Untuk demo atau tutorial video lengkap dari proyek ini (Simpan Teks Sebagai File), Anda dapat menonton video YouTube yang diberikan

Video Tutorial Menyimpan Teks Sebagai File di JavaScript

Di video di atas, Anda telah melihat demo cara menyimpan teks sebagai file dan cara saya membuatnya menggunakan HTML CSS & JavaScript. Saya harap Anda telah menonton videonya sampai akhir dan juga mempelajari sesuatu yang baru darinya

Jika Anda menyukai proyek ini dan ingin mendapatkan kode sumber atau file, Anda dapat dengan mudah mendapatkannya dari bagian bawah halaman ini. Tetapi sebelum itu pastikan Anda menonton video dan memahami kode atau metode dengan benar jika tidak, Anda mungkin akan bingung nantinya saat mengimplementasikan kode tersebut di proyek Anda

Anda mungkin menyukai proyek-proyek ini

Unduh File Apa Saja Dari URL
Tag Kotak Input dalam JavaScript
Generator Kode QR dalam JavaScript
Penggeser Rentang Harga dalam JavaScript

Simpan Teks Sebagai File di JavaScript [Kode Sumber]

Untuk membuat proyek ini (Simpan Teks Sebagai File dalam JavaScript), pertama, Anda perlu membuat tiga file - file HTML, CSS & JavaScript dan menempelkan kode yang diberikan ke dalam file Anda satu per satu. Jika Anda tidak tahu cara membuat file ini atau apa yang harus dilakukan atau tidak ingin melakukannya, Anda dapat mengunduh file kode sumber proyek ini dengan mengeklik tombol unduh yang diberikan di bagian bawah halaman ini

Pertama, buat file HTML dengan nama index. html dan rekatkan kode yang diberikan ke file HTML Anda. Ingat, Anda harus membuat file dengan a. ekstensi html

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Save Text As File JavaScript | CodingNepal</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>

Kedua, buat file CSS dengan nama style. css dan rekatkan kode yang diberikan ke file CSS Anda. Ingat, Anda harus membuat file dengan a. ekstensi css

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

Terakhir, buat file JavaScript dengan nama script. js di dalam folder js dan rekatkan kode yang diberikan ke file JavaScript Anda. Ingat, Anda harus membuat file dengan a. ekstensi 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();
});

Itu saja, sekarang Anda telah berhasil membuat proyek tentang Cara Menyimpan Teks Sebagai File di HTML CSS & JavaScript. Jika kode Anda tidak berfungsi atau Anda menghadapi masalah apa pun, harap unduh file kode sumber dari tombol unduh yang diberikan. Ini gratis dan file zip akan diunduh yang berisi folder proyek dengan file kode sumber

Bagaimana cara menyimpan nilai kotak teks ke. File TXT dalam HTML?

Jika mau, Anda dapat mengunduh kode sumber proyek ini (Textarea Text to a File using JavaScript). .

Create a box on the webpage.

.. .

Tambahkan judul. .

Buat kotak input teks. .

Buat kotak untuk memasukkan nama file. .

Buat tombol unduh file. .

Simpan Teks ke File dengan JavaScript

Bisakah HTML menulis ke file teks?

Setelah Notepad terbuka dengan kode HTML, klik File, lalu Save as, pilih lokasi tempat Anda ingin menyimpan file, lalu klik tombol Save untuk menyimpan sebagai dokumen teks.