Comment servir un fichier à télécharger avec AngularJS ou Javascript ?

Question

J'ai du texte dans une zone de texte cachée. Lorsqu'on clique sur un bouton, j'aimerais que le texte puisse être téléchargé sous la forme d'un fichier PDF. .txt fichier. Est-ce possible en utilisant AngularJS ou Javascript ?

Answer 1

Vous pouvez faire quelque chose comme ça en utilisant Blob .

<a download="content.txt" ng-href="{{ url }}">download</a>

dans votre contrôleur :

var content = 'file content for example';
var blob = new Blob([ content ], { type : 'text/plain' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );

afin d'activer l'URL :

app = angular.module(...);
app.config(['$compileProvider',
    function ($compileProvider) {
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
}]);

Veuillez noter que

Chaque fois que vous appelez createObjectURL(), une nouvelle URL d'objet est créée, même si vous en avez déjà créé une pour le même objet. Chacune de ces URL doit être libérée en appelant URL.revokeObjectURL() lorsque vous n'en avez plus besoin. Les navigateurs les libèrent automatiquement lorsque le document est déchargé. Toutefois, pour des performances et une utilisation de la mémoire optimales, si vous pouvez les décharger explicitement à des moments sûrs, vous devriez le faire.

Source : MDN

Answer 2

Essayez ceci

<a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf">

et visitez ce site, il pourrait vous être utile :)

http://docs.angularjs.org/guide/

Answer 3

Cela peut être fait en javascript sans avoir besoin d'ouvrir une autre fenêtre du navigateur.

window.location.assign('url');

Remplacez "url" par le lien vers votre fichier. Vous pouvez mettre cela dans une fonction et l'appeler avec ng-click si vous devez déclencher le téléchargement à partir d'un bouton.

Answer 4

Dans notre projet actuel au travail, nous avions un iFrame invisible et je devais fournir l'url du fichier à l'iFrame pour obtenir une boîte de dialogue de téléchargement. Lors du clic sur le bouton, le contrôleur génère l'url dynamique et déclenche un événement $scope dans lequel un objet personnalisé de type directive J'ai écrit, c'est la liste. La directive ajoutera une iFrame au corps s'il n'existe pas déjà et lui attribuera l'attribut url.

EDIT : Ajout d'une directive

appModule.directive('fileDownload', function ($compile) {
    var fd = {
        restrict: 'A',
        link: function (scope, iElement, iAttrs) {

            scope.$on("downloadFile", function (e, url) {
                var iFrame = iElement.find("iframe");
                if (!(iFrame && iFrame.length > 0)) {
                    iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
                    iElement.append(iFrame);
                }

                iFrame.attr("src", url);

            });
        }
    };

    return fd;
});

Cette directive répond à un événement du contrôleur appelé downloadFile

donc dans votre contrôleur vous faites

$scope.$broadcast("downloadFile", url);

Answer 5

Vous pouvez définir location.href à un données URI contenant les données que vous voulez laisser l'utilisateur télécharger. En dehors de cela, je ne pense pas qu'il y ait un moyen de le faire avec juste JavaScript.