Déclencher le téléchargement d'un fichier sur le clic du bouton Javascript avec le contenu de DOM

Je veux télécharger un fichier qui est créé à partir de l'élément DOM. Si un utilisateur clique sur un bouton sur une page web et il invoque une méthode javascript qui peut saisir le contenu d'un élément du DOM et demander à l'utilisateur pour le téléchargement.

Je suis en mesure de saisir le contenu de l'élément DOM à l'intérieur d'un Javascript Var. Mais vous ne savez pas comment aller plus loin.

Pour saisir l'élément DOM, je suis en utilisant:

var elem = document.getElementById("userDownload");
  • veuillez fournir ce que vous avez essayé
InformationsquelleAutor CodeMonkey | 2014-08-01
  1. 13

    Je ne suis pas sûr si je comprends bien, qu'est-ce que le contenu que vous êtes en train de télécharger. Si vous avez du contenu (qui sonne comme le HTML d'un élément?) stocké dans une variable, vous pouvez essayer:

    ("#downloadbutton").click(function() {
  //var content = content of file;
  var dl = document.createElement('a');
  dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
  dl.setAttribute('download', 'filename.txt');
  dl.click();
});
    • Votre extrait de code a été utile comme une partie de ma solution complète. Je vous remercie. Chose qui me manquait était inline gestionnaires d'événements n'avaient pas de travail pour moi. J'ai dû ajouter un listner pour eux. Je vous remercie.
    • Pas de problème, heureux d'être de l'aide.
    InformationsquelleAutor user3758133
  2. 4

    J'ai apprécié de trouver cette question, mais au moins sur Firefox fonctionnant avec linux, vous devez ajouter le dl élément le document pour obtenir la fonctionnalité de clic de travail. Je n'ai pas largement testé sur d'autres navigateurs comment c'est, mais il est nécessaire sur certains au moins, donc je vous recommande la modification suivante:

    var content = document.getElementById("elem").innerHTML;
var dl = document.createElement('a');
dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
dl.setAttribute('download', 'filename.txt');
//Set hidden so the element doesn't disrupt your page
dl.setAttribute('visibility', 'hidden');
dl.setAttribute('display', 'none');
//Append to page
document.body.appendChild(dl);
//Now you can trigger the click
dl.click();
    InformationsquelleAutor elzilrac
  3. 2

    Compris: j'ai eu à faire" 

    function myAlert(){
    var content = document.getElementById("elem").innerHTML;
    var dl = document.createElement('a');
    dl.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
    dl.setAttribute('download', 'filename.txt');
    dl.click();
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('alertButton').addEventListener('click', myAlert);
});
    InformationsquelleAutor CodeMonkey