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?
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('//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