suchen

Heim  >  Artikel  >  Web-Frontend  >  So speichern Sie Textdaten mit JavaScript

So speichern Sie Textdaten mit JavaScript

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

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Hochladen segmentierter Haltepunkte für BrowserdateienNächster Artikel：Hochladen segmentierter Haltepunkte für Browserdateien

In Verbindung stehende Artikel

Mehr sehen