Heim > Artikel > Web-Frontend > So speichern Sie Textdaten mit JavaScript
So speichern Sie Textdaten mit JavaScript
- php中世界最好的语言Original
- 2018-03-10 15:57:182627Durchsuche
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('data:text/plain;charset=utf-8,' + 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!