Did you know that with vanilla JavaScript, you can easily convert any text into a downloadable file in various formats such as txt, html, css, docs, ppt, and more? If you were not aware of this feature, then this blog post is definitely for you.
As you can see from the preview image, this project includes a text box, an input box, select options, and a save button. The process is quite simple: you just need to type in the text you want to convert in the text box, select the desired file format from the options available, and then click on the "save" button. Once you do so, a new file with your entered text will be saved onto your computer.
It is important to note that the file name is not mandatory, so if you don't give it a name, the file will still be saved with a unique one. This feature can come in handy when you need to quickly save some important text or data in a particular format for future reference.
Vanilla JavaScript is a lightweight programming language that can be used to create dynamic web applications. It is not dependent on any specific framework or library, and can be easily integrated into any project. With the ability to convert text into different file formats, JavaScript becomes even more powerful and versatile.
Overall, the process of converting text into a downloadable file using vanilla JavaScript is straightforward and can be accomplished with just a few lines of code. It is a useful feature to have, particularly for web developers and designers who may need to provide their users with the option to save certain content in various formats. So, give it a try and see how it can improve your workflow!
How to Save Text As File
Creating a File Save Er Tool for your Blogger Website will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to paste the following codes in a post, page or anywhere else through HTML view.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Pages or Post.
Step 3: Either create a new page or post by clicking on icon or click on the existing page or post to add codes there.
Step 4: Switch to HTML view.
Step 5: Paste the following codes where you want to add the File Save Er Tool.
<style>
/* Code by: Navy Studio */ #clearBtn,#saveBtn,.box{background:#fff;font-size:14px}.file-options,.save-as{margin-left:0;margin-right:1%}.box{padding:16px 20px;box-shadow:0 5px 35px rgb(0 0 0/7%);border:0;border-radius:10px;margin-bottom:20px}#input,#text,.nvsn select{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,.08);border-radius:5px}.nvsn select{height:52px;appearance:none}#input:focus,#text:focus,.nvsn select:focus{outline:0;border:1px dashed var(--linkC)}#textA textarea{height:80px;-webkit-transition:.25s ease-in-out;transition:.25s ease-in-out}#textA textarea:focus{height:150px}#clearBtn,#saveBtn{text-align:center;align-items:center;margin-top:5px;padding:12px 15px;outline:0;border:0;box-shadow:0 2px 25px 2px rgba(0,0,0,.05);line-height:20px;font-weight:700}.f{border-radius:5px 5px 0 0}.l{border-radius:0 0 5px 5px}.file-options{width:49%}.save-as{width:50%}.drK #clearBtn,.drK #input,.drK #saveBtn,.drK #text,.drK .box,.drK .nvsn select{background:var(--darkB);border:1px solid var(--darkBl)}.drK .nvsn select{color:#fff}.drK #input:focus,.drK #text:focus,.drK .nvsn select:focus{outline:0;border:1px dashed var(--darkU)}.option :where(input,.select-menu){margin-left:0;margin-right:1%;width:50%}
</style>
<div class="file-name">
<div class="box" style="display: flex">
<div class="option file-options">
<label for="input">Enter file Name</label>
<input id="input" type="text" required="" spellcheck="false" placeholder="Enter file name">
</div>
<div class="option save-as">
<label for="select">Save as</label>
<div class="nvsn">
<select id="select">
<option value="text/html">HTML File (.html)</option>
<option value="text/css">CSS File (.css)</option>
<option value="text/javascript">JS File (.js)</option>
<option value="text/plain" selected="">Text File (.txt)</option>
<option value="text/xml">XML File (.xml)</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>
<option value="text/python">Python File (.py)</option>
</select>
</div>
</div>
</div>
<div class="box">
<div id="textA">
<label for="text">Enter Something</label>
<textarea rows="3" style="resize: vertical" required="" spellcheck="false" id="text" placeholder="Enter something to save"></textarea>
</div>
<div id="saveBtn" class="f" type="button ln">Save As Text File</div>
<div id="clearBtn" class="l" onclick="cleared();vibRate(50)" type="button ln">Clear</div>
</div>
</div>
<script>
const textarea = document.querySelector("textarea");
const fileNameInput = document.querySelector(".file-name input");
const selectMenu = document.querySelector(".save-as select");
const saveBtn = document.getElementById("saveBtn");
const clearBtn = document.getElementById("clearBtn");
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 + "Unknown";
link.href = fileUrl;
link.click();
});
function cleared() {
// Function to reset the input and text fields
document.getElementById("input").value = "";
document.getElementById("text").value = "";
}
</script>
Step 6: That's done! Now click on the top arrow icon and save the changes.
Conclusion
In this post, I have talked about How to Save Text As File in JavaScript [Source Codes] Blogger Tool. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.
Refrence:
https://www.sanvedesign.com/2023/04/how-to-save-text-as-file-in-javascript.html