N'a pas réussi à exécuter 'atob' sur'Window'

j'essaie de sauvegarder mon fichier HTML dans Chrome lorsque l'utilisateur appuie sur les touches ctrl + s mais Chrome est bloqué.

(je veux juste télécharger le code source de mon fichier HTML)

j'ai lu que ça arrive parce que mon fichier est plus grand que 1,99 M..

dans la première tentative (avant que je savais à propos de l'écrasement dans le Chrome): 

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);
    pom.click();
}

download('test.html', "<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>");

la deuxième tentative, après J'ai lu à propos de l'accident, j'ai utilisé blob : 

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new BlobBuilder();
    bb.append(ab);
    return bb.getBlob(mimeString);
}

function download(dataURI) {
    var blob = dataURItoBlob(dataURI);
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

download("<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>")

ici j'ai eu l'erreur: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Je ne sais pas, mais j'ai lu que j'ai besoin d'encoder ma chaîne de caractères à base64: Comment Pouvez-vous encoder une chaîne de caractères à Base64 en JavaScript?

il y a une réponse de 148 voix. Je le coller dans mon code et je ne sais pas comment continuer.

Où dois-je l'appeler et comment? Puis-Je mettre un nom sur mon fichier enregistré?

je pense que j'ai besoin de faire quelque chose comme: 

download(_utf8_decode("<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>"))
17
demandé sur Community 2014-03-22 17:59:35

3 réponses

BlobBuilder est obsolète, utilisez Blob constructeur à la place: 

URL.createObjectURL(new Blob([/*whatever content*/] , {type:'text/plain'}));

renvoie une URL de blob que vous pouvez ensuite utiliser dans href d'une ancre . Vous pouvez aussi modifier l'attribut download d'une ancre pour manipuler le nom du fichier: 

<a href="/*assign url here*/" id="link" download="whatever.txt">download me</a>

Fidlted . Si je me souviens bien, il y a des restrictions arbitraires sur le non-utilisateur de confiance téléchargements amorcés; nous nous en tiendrons donc à un clic de lien qui est considéré comme suffisamment initié par l'utilisateur:)

mise à Jour: c'est en fait assez trivial pour enregistrer le document courant du html! Chaque fois que notre lien interactif est cliqué, nous mettrons à jour son href avec un blob pertinent. Après l'exécution de l'événement lié au clic, c'est L'URL de téléchargement vers laquelle vous naviguerez! 

$('#link').on('click', function(e){
  this.href = URL.createObjectURL(
    new Blob([document.documentElement.outerHTML] , {type:'text/html'})
  );
});

Fidlted again .

15
répondu o.v. 2014-03-26 03:10:36

ici j'ai eu l'erreur: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

parce que vous n'avez pas passé de chaîne codée base64. Regardez vos fonctions: les deux download et dataURItoBlob s'attendent à un URI de données pour une raison quelconque; vous passez cependant une chaîne de markup html simple à download dans votre exemple.

non seulement HTML est invalide comme base64, vous appelez .split(',')[1] sur elle qui donnera undefined et "undefined" n'est pas valide chaîne base64.

Je ne sais pas, mais j'ai lu que j'avais besoin d'encoder ma chaîne pour base64

ça n'a pas beaucoup de sens pour moi. Vous souhaitez le convertir en quelque sorte, uniquement pour les décoder?

Comment dois-je l'appeler et comment?

changez l'interface de votre fonction download retour à l'endroit où il a reçu les arguments filename et text .

notez que le BlobBuilder ne supporte pas seulement l'ajout de chaînes entières (donc vous n'avez pas besoin de créer ces choses ArrayBuffer ), mais est également déprécié en faveur du Blob constructeur .

puis-je mettre un nom sur mon fichier enregistré?

Oui. Ne pas utilisez le Blob constructeur, mais le File constructeur. 

function download(filename, text) {
    try {
        var file = new File([text], filename, {type:"text/plain"});
    } catch(e) {
        // when File constructor is not supported
        file = new Blob([text], {type:"text/plain"});
    }
    var url  = window.URL.createObjectURL(file);
    …
}

download('test.html', "<html>" + document.documentElement.innerHTML + "</html>");

voir blob JavaScript nom du fichier sans lien sur ce qu'il faut faire avec cette url d'objet, il suffit de définir l'emplacement actuel à elle ne fonctionne pas.

5
répondu Bergi 2017-05-23 12:34:41

voici un fiddle mis à jour où l'entrée de l'utilisateur est enregistrée dans le stockage local automatiquement. chaque fois que le violon est relancé ou que la page est rafraîchie, l'état précédent est restauré. de cette façon, vous n'avez pas besoin d'inviter les utilisateurs à enregistrer, il sauve juste sur son propre.

http://jsfiddle.net/tZPg4/9397 /

stack overflow exige que j'inclue du code avec un lien jsFiddle donc s'il vous plaît ignorez snippet: 

localStorage.setItem(...)
2
répondu Jeremy Danyow 2014-03-25 22:33:31