Comment faites-vous servir un fichier à télécharger avec AngularJS ou Javascript?
J'ai un peu de texte caché dans un textarea. Quand on clique sur un bouton, je voudrais avoir le texte proposé pour le téléchargement comme un .txt
fichier. Est-ce possible en utilisant AngularJS ou Javascript?
- Quels sont les navigateurs compatibles? Cela peut être résolu en quelques façons créatives (comme data-uri, blob, le navigateur, l'historique de l'API, etc) mais cela dépend vraiment de la.
- Angulaire Fichier de Veille est un bon polyfill pour moins navigateurs modernes.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez faire quelque chose comme ceci en utilisant
Blob
.dans votre contrôleur:
afin de permettre à l'URL:
Veuillez noter que
Source: MDN
$scope.url
n'a pas fonctionné pour moi. J'ai eu à utiliserwindow.location
à la place.download
attribut n'est pas pris en charge dans tout IE ou Safari versions bien caniuse.com/#feat=downloadCliquez simplement sur le bouton de téléchargement à l'aide de code suivant.
en html
HTML:
Dans le contrôleur
HTML:
$http.get(...)
assurez-vous de définirresponseType:'arraybuffer'
comme expliqué ici: stackoverflow.com/questions/21628378/...Essayer cette
et de visiter ce site, il pourrait être utile pour vous 🙂
http://docs.angularjs.org/guide/
download
attribut qui n'a pas encore pris en charge par tout IE ni Safari version. Découvrez-le ici : caniuse.com/#feat=downloadCela peut être fait en javascript sans avoir besoin d'ouvrir une autre fenêtre de navigateur.
Remplacer 'url' avec le lien de votre fichier. Vous pouvez mettre ceci dans une fonction et de l'appeler avec
ng-click
si vous avez besoin de déclencher le téléchargement à partir d'un bouton.Dans notre projet actuel au travail, nous avons eu une iFrame invisible, et j'ai dû nourrir l'url pour le fichier à l'iFrame pour obtenir une boîte de dialogue de téléchargement. Sur le bouton cliquez sur le contrôleur génère l'url dynamique et déclenche une $la portée de l'événement où une coutume
directive
je l'ai écrit, l'inscription sur une liste. La directive aura pour effet d'ajouter un iFrame pour le corps, si elle n'existe pas déjà et définit l'url de l'attribut.EDIT: Ajout d'une directive
Cette directive répond à un événement de contrôleur appelé
downloadFile
dans votre contrôleur, vous ne
Vous pouvez définir
location.href
à un les données URI contenant les données que vous souhaitez permettre à l'utilisateur de télécharger. En plus de cela, je ne pense pas qu'il y a moyen de le faire avec JavaScript.$location.href
changé à$window.location.href
Voudrais juste ajouter que dans le cas où il ne télécharge pas le fichier en raison de risque:blob:null... lorsque vous passez la souris sur le bouton de téléchargement, vous devez désinfecter. Par exemple,
J'ai eu le même problème et passer de nombreuses heures à trouver différentes solutions, et maintenant, je rejoins tous les commentaires de ce post.J'espère qu'il sera utile, ma réponse a été correctement testé sur Internet Explorer 11, Chrome et FireFox.
HTML :
DIRECTIVE :
DANS LE CONTRÔLEUR:
EN SERVICE:
BACKEND(au PRINTEMPS):
Si vous avez accès sur le serveur, pensez à définir des en-têtes comme répondu à cette question plus générale.
La lecture des commentaires sur cette réponse, il est conseillé d'utiliser un Contenu plus spécifiques de Type de flux d'octets.
Je ne voulais pas des Url Statiques. J'ai AjaxFactory pour faire toutes les opérations ajax. J'obtiens l'url de l'usine et de liaison comme suit.
Merci @AhlemMustapha
Cela a fonctionné pour moi dans angulaire:
data:text/plain;base64,${btoa(theStringGoesHere)}