So speichern Sie Textdaten mit JavaScript-js-Tutorial-php.cn

So speichern Sie Textdaten mit JavaScript

php中世界最好的语言

Freigeben： 2018-03-10 15:57:18

Original

2730 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie JavaScript zum Speichern von Textdaten verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von JavaScript zum Speichern von Textdaten gelten. Hier ist ein praktischer Fall Schauen Sie mal rein.

JavaScript-Beispiel zum Speichern von Textdaten, natürlich sind nicht nur Text, sondern auch andere Typen möglich

Erster 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>

Nach dem Login kopieren

Klassifizierung implementieren

Allgemeines In In diesem Fall kann die Methode zur Verwendung der browsereigenen Funktion zum Exportieren einer Textdatei einfach in zwei Typen unterteilt werden:
1. DataURL
2.ObjectURL

Prinzip

In Tatsächlich ist das Prinzip das gleiche wie beim üblichen Download, außer dass der Download-Link durch die beiden oben genannten URLs ersetzt wird

Vergleiche

DataURL-Methode

Im Beispielcode, DataURL-Methode 1 besteht darin, den Text zu konvertieren. Die Datei wird direkt in DataURL eingelesen. DataURL-Methode 2 besteht darin, den Textinhalt zu lesen und den Inhalt dann mit (data:text/plain;charset=utf-8,...) zu verbinden. )
DataURL-Methode 1 und DataURL-Methode 2-Paar Die Dateitextcodierung stellt bestimmte Anforderungen und ist anfällig für verstümmelte Zeichen

ObjectURL-Methode

ObjectURL konvertiert Objekte im Speicher in ObjectURL. ObjectURL ist weniger anfällig für verstümmelte Zeichen, aber DataURL ist relativ instabil.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere interessante Informationen finden Sie hier Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie schreibe ich einen Simulator mit JS

ES6 legt die Datenstruktur und Kartendaten fest Struktur

Detaillierte Erläuterung der neuen Array-API in ES6

Das obige ist der detaillierte Inhalt vonSo speichern Sie Textdaten mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!