web-dev-qa-db-fra.com

créer un fichier en utilisant javascript dans chrome côté client

Je voudrais savoir si je peux créer un fichier texte et l'enregistrer dans la section "Téléchargements" de l'utilisateur sur son ordinateur en utilisant javascript. La façon dont ma fonctionnalité devrait fonctionner est lorsque l'utilisateur clique sur le bouton Envoyer, je renseigne les informations des utilisateurs dans le fichier texte, puis les enregistre dans sa machine. Je voudrais que cela fonctionne dans Google Chrome.

Est-ce possible? J'ai vu des articles qui me disent spécifiquement qu'il s'agit d'un grave problème de sécurité.

javascriptgoogle-chromejavascript-eventsgoogle-chrome-extensionfacebook-javascript-sdk
28
Praveen

Bien sûr, vous pouvez, en utilisant les toutes nouvelles API: http://jsfiddle.net/4D92b/88/ .

 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

 window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    fs.root.getFile('test.bin', {create: true}, function(fileEntry) { // test.bin is filename
        fileEntry.createWriter(function(fileWriter) {
            var arr = new Uint8Array(3); // data length

            arr[0] = 97; // byte data; these are codes for 'abc'
            arr[1] = 98;
            arr[2] = 99;

            var blob = new Blob([arr]);

            fileWriter.addEventListener("writeend", function() {
                // navigate to file, will download
                location.href = fileEntry.toURL();
            }, false);

            fileWriter.write(blob);
        }, function() {});
    }, function() {});
}, function() {});
39
pimvdb

Entrez ceci dans le navigateur Chrome

data:text;charset=utf-8,helloWorld

Donc, pour construire le téléchargement pour vos utilisateurs, vous feriez quelque chose comme

data='<a href='data:text;charset=utf-8,'+uriEncode(yourUSERdataToDownload)+' >Your Download</a>

Ensuite, injectez-le dans le dom pour que votre utilisateur appuie.

11
Arcabard

Essaye ça:

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"'>Your Download</a>";
document.getElementById('test').click();

si vous souhaitez définir le nom de fichier, utilisez l'attribut download de la balise d'ancrage:

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"' download=yourfilename>Your Download</a>";
document.getElementById('test').click();
4
dsrdakota

La méthode suivante fonctionne dans IE11 +, Firefox 25+ et Chrome 30+:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

Voir ceci en action: http://jsfiddle.net/Kg7eA/

Firefox et Chrome prennent en charge l'URI de données pour la navigation, ce qui nous permet de créer des fichiers en naviguant vers un URI de données, tandis que IE ne le prend pas en charge pour des raisons de sécurité) .

D'autre part, IE possède une API pour enregistrer un blob, qui peut être utilisée pour créer et télécharger des fichiers.

4
dinesh ygv

Non, car cela vous permettrait de créer des programmes malveillants sur l'ordinateur du client et de nuire à sa vie privée.

En outre, les demandes de téléchargement de fichiers proviennent du serveur, vous devrez donc créer le fichier sur le serveur et le servir à l'utilisateur, et espérons qu'il le sauvegardera (s'il l'a demandé, il est probable qu'il le fera) .

Une autre solution possible à envisager consiste à utiliser des URI de données ou des CSV, mais la prise en charge du navigateur pour ces derniers est incomplète (IE), voir Créer un fichier en mémoire à télécharger par l'utilisateur, pas via le serveur

0
Madara Uchiha

Vous aurez besoin de fonctionnalités côté serveur pour servir à l'utilisateur un fichier texte (javascript ne suffit pas). Vous pouvez créer un script côté serveur qui crée le fichier et utiliser javascript afin d'inviter l'utilisateur à l'enregistrer.

0
nonouco

Sur le bouton Soumettre de l'utilisateur, vous pouvez créer un fichier sur le serveur et rediriger l'utilisateur vers l'URL du fichier, d'où il devrait être téléchargé automatiquement.

0
vicky