Comment enregistrer des données texte à l'aide de JavaScript-js tutoriel-php.cn

Comment enregistrer des données texte à l'aide de JavaScript

php中世界最好的语言

Libérer： 2018-03-10 15:57:18

original

2738 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser JavaScript pour enregistrer des données texte, et quelles sont les précautions concernant l'utilisation de JavaScript pour enregistrer des données texte. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Exemple de données de sauvegarde de texte JavaScript, bien sûr, non seulement du texte mais d'autres types sont également possibles

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

Copier après la connexion

classification d'implémentation

Général Dans dans ce cas, la méthode d'utilisation de la fonction propre du navigateur pour exporter un fichier texte peut être simplement divisée en deux types :
1 DataURL
2.ObjectURL

Principe

In. en fait, le principe est le même que Le téléchargement habituel est le même, sauf que le lien de téléchargement est remplacé par les deux URL ci-dessus

Comparaison

Méthode DataURL

Dans le exemple de code, la méthode DataURL 1 consiste à convertir le texte. Le fichier est directement lu dans DataURL. La méthode DataURL 2 consiste à lire le contenu du texte, puis à fusionner le contenu avec (data:text/plain;charset=utf-8,... )
Paire méthode DataURL 1 et méthode DataURL 2 Le codage du texte du fichier a certaines exigences et est sujet aux caractères tronqués

Méthode ObjectURL

ObjectURL convertit les objets en mémoire en ObjectURL Par rapport à DataURL, ObjectURL est moins sujet aux caractères tronqués, mais DataURL est relativement fixe. ObjectURL est relativement instable

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres éléments connexes. articles sur le site php chinois !

Lecture connexe :

Comment écrire un simulateur avec JS

ES6 définit la structure des données et cartographie les données Structure

Explication détaillée de la nouvelle API de tableau dans ES6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!