Comment créer un lien fichier dynamique + pour télécharger en Javascript? [dupliquer]
cette question a déjà une réponse ici:
- créer un fichier en mémoire pour que l'utilisateur puisse le télécharger, pas par l'intermédiaire du serveur 16 réponses
typiquement, les pages HTML peuvent avoir un lien vers des documents (PDF, etc...) qui peut être téléchargé à partir du serveur.
supposant un Javascript activé page web, est-il possible de créer dynamiquement un document texte (par exemple) à partir du navigateur de l'utilisateur et d'ajouter un lien pour télécharger ce document sans aller-retour vers le serveur (ou un minimum)?
en d'autres mots, l'utilisateur cliquerait sur un bouton, le javascript générerait des nombres aléatoires (par exemple), et les mettrait dans une structure. Ensuite, le javascript (JQuery par exemple) ajouterait un lien à la page pour télécharger le résultat sous forme de fichier texte. à partir de la structure.
Cet objectif est de garder tous (ou au moins la plupart) de la charge de travail du côté de l'utilisateur.
Est-ce possible, si oui comment?
3 réponses
en ajoutant un URI de données à la page, vous pouvez intégrer un document dans la page qui peut être téléchargé. La partie de données de la chaîne peut être concaténée dynamiquement en utilisant Javascript. Vous pouvez choisir de le formater comme une chaîne encodée URL ou comme Base64 encodé. Lorsque base64 est encodé, le navigateur télécharge le contenu sous forme de fichier. Vous devrez ajouter un script ou un plugin jQuery pour faire l'encodage. Voici un exemple avec static données:
jQuery('body').prepend(jQuery('<a/>').attr('href','data:text/octet-stream;base64,SGVsbG8gV29ybGQh').text('Click to download'))
Voici une solution que j'ai créé, qui vous permet de créer et de télécharger un fichier dans un simple clic :
<html>
<body>
<button onclick='download_file("my_file.txt", dynamic_text())'>Download</button>
<script>
function dynamic_text() {
return "create your dynamic text here";
}
function download_file(name, contents, mime_type) {
mime_type = mime_type || "text/plain";
var blob = new Blob([contents], {type: mime_type});
var dlink = document.createElement('a');
dlink.download = name;
dlink.href = window.URL.createObjectURL(blob);
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
</body>
</html>
j'ai créé ce en adaptant le code de cette démo HTML5 et déconner avec les choses jusqu'à ce que ça marche, donc je suis sûr qu'il ya des problèmes avec elle (veuillez commenter ou modifier si vous avez des améliorations!) mais c'est un "151920920 de travail", cliquez une solution.
(au moins, ça fonctionne pour moi sur la dernière version de Chrome sous Windows 7)
un fichier PDF? Aucun. Un fichier txt . Oui. Avec le récent HTML5 blob URIs. Une forme très basique de votre code ressemblerait à quelque chose comme ceci:
window.URL = window.webkitURL || window.URL;
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
var file = new window.BlobBuilder(),
number = Math.random().toString(); //In the append method next, it has to be a string
file.append(number); //Your random number is put in the file
var a = document.createElement('a');
a.href = window.URL.createObjectURL(file.getBlob('text/plain'));
a.download = 'filename.txt';
a.textContent = 'Download file!';
document.body.appendChild(a);
vous pouvez utiliser les autres méthodes mentionnées dans les autres réponses comme une solution de rechange, peut-être, puisque BlobBuilder probablement n'est pas pris en charge très bien.
Note: BlobBuilder semble être obsolète. se Réfèrent à cette réponse pour voir comment les utiliser Blob au lieu de BlobBuilder . Grâce à @limonte pour le heads up.