Home > Article > Web Front-end > How to save text data using JavaScript

How to save text data using JavaScript

php中世界最好的语言Original: 2018-03-10 15:57:182682browse

How to bring to you this timeUsing JavaScript to save text data, what are the precautions for using JavaScript to save text data, the following is a practical case, let's take a look.

JavaScript save text data example, of course not only text but other types are also possible

First code

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var fl;            function g(f) {
                fl = null;                if(f) {                    document.getElementById("fname").innerText = f.name;                    document.getElementById("fsize").innerText = f.size;
                    fl = f;
                }
            }            function dataURLSave1() {                if(fl) {                    var reader = new FileReader();
                    reader.onload = function(e) {
                        ck(e.target.result);
                    };
                    reader.readAsDataURL(fl);
                }
            }            function dataURLSave2() {                if(fl) {                    var reader = new FileReader();
                    reader.onload = function(e) {
                        ck(&#39;data:text/plain;charset=utf-8,&#39; + e.target.result);
                    };
                    reader.readAsText(fl);
                }
            }            function objectURLSave() {                if(fl) {
                    ck(URL.createObjectURL(fl));
                    setTimeout(function(){
                        URL.revokeObjectURL(fl);//用URL.revokeObjectURL()来释放这个object URL
                    },200);
                }
            }            function ck(href) {                document.getElementById("hf").href = href;                document.getElementById("hf").download = fl.name;                document.getElementById("hf").click();
            }        </script>
    </head>
    <body>
        <input type="file" onchange="g(this.files[0])">
        <div>文件名:<span id="fname"></span></div>
        <div>大小:<span id="fsize"></span></div>
        <button onclick="dataURLSave1()">保存(dataURL方式1)</button>
        <button onclick="dataURLSave2()">保存(dataURL方式2)</button>
        <button onclick="objectURLSave()">保存(objectURLSave方式)</button>
        <a id="hf" href="" download="download"></a>
    </body></html>

implement classification

Generally Using the browser's built-in function to export text files can be simply divided into two methods
1.DataURL
2.ObjectURL

Principle

In fact, the principle is the same as usual downloading are the same, except that the download link is replaced by the above two URLs

Comparison

DataURL method

In the sample code, DataURL method 1 is to directly copy the text file Read into DataURL, DataURL method 2 is to read the text content and then splice the content with (data:text/plain;charset=utf-8,...)
DataURL method 1 and DataURL method 2 pair the file text Encoding has certain requirements and is prone to garbled characters

ObjectURL method

ObjectURL converts objects in memory into ObjectURL. Compared with DataURL, ObjectURL is less prone to garbled characters, but DataURL is relatively fixed compared to ObjectURL Unfixed

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to save text data using JavaScript

Related articles