Create a JSON File Compressor Web App Using FileSaver.js Library in JS Complete Project For learner

Welcome Learner today in this blog post we will be building a JSON file compressor web app in JS. All the Complete source code of the application is shown Down.

 

lets Started

 

In sequence to get begun, you require to make an index.html file and copy-paste the following code.

 

 

index.html

 

<h1>JSON Compressor</h1>
<input type="file" accept=".json" />
<pre></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

 

 

script.js

 

 


document.querySelector("input").onchange = function(evt) {
    try {
        var f = evt.target.files[0];
        var r = new FileReader();
        r.onload = function(e) {
            try {
                var contents = e.target.result;
                var name = f.name;
                saveAs(new Blob([JSON.stringify(JSON.parse(contents))], {
                    type: 'application/json'
                }), name);
            } catch (e) {
                document.querySelector("pre").textContent = e.stack;
            }
        };
        r.readAsText(f);
    } catch (e) {
        document.querySelector("pre").textContent = e.stack;
    }
}

Leave a Comment

Your email address will not be published. Required fields are marked *