Télécharger un fichier avec AngularJS

J'ai besoin de fournir un lien pour télécharger un fichier, le lien doit être caché et accessible par tous les utilisateurs, Voici mon code , il n'y a pas d'erreurs que ce soit, mais je ne peux même pas obtenir le téléchargement de la boîte de dialogue ouvrir:

Modèle

 <a ng-href="#" target="page" type="button" class="btn" 
ng-click="download()">Download</a>

Fichier de Script

$scope.download = function(){
 //here i need to know the code,can anybody explain me
}

OriginalL'auteur vallepu veerendra kumar | 2015-03-05

  1. 4

    Tout d'abord, votre ne peut pas "cacher/non public" d'un lien dans une technologie web (HTML/CSS/JavaScript). Les téléchargements sont gérés par le client, donc le Téléchargement/Lien URL doit être publique. Vous pouvez essayer de "cacher" les params comme par exemple l'Id dans l'URL de téléchargement en utilisant un backend exécuté langage de programmation comme PHP ou node.js etc.". De cette façon, vous pouvez créer hash Url comme http://www.myside.com/download/359FTBW!S3T387IHS pour masquer les paramètres, tels que la recordId dans votre URL.

    En sachant cela, votre solution est assez facile. Utilisez simplement le Attribut HTML télécharger comme <a href="http://mydownloadurl" download>link text</a> pour forcer le navigateur à télécharger le href source. Pas de ng-click est nécessaire ici. Malheureusement, le download attribut n'est pas pris en charge par le navigateur Safari. Cela n'a pas vraiment d'importance, tandis que le navigateur gère le téléchargement lui-même. Selon le système des utilisateurs de l'OS de configuration le fichier va être téléchargé ou directement ouvert dans un programme installé sur ce système. Par exemple, un fichier PDF est ouvert dans une Visionneuse de PDF si certains pdf viewer application est disponible.

    J'ai écrit un Plunker qui gère ng-href dans un AngularJS contrôleur $scope. J'espère que c'est ce dont vous avez besoin.

    De votre contrôleur:

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.fileHref = 'http://www.analysis.im/uploads/seminar/pdf-sample.pdf';
});

    Votre point de vue: 

    <head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <a ng-href="fileHref" download="yourFilename">Download</a>
</body>
</html>
    ok merci, supppose si nous voulons télécharger le fichier à l'intérieur de ng-cliquez sur la fonction.comment pouvons-nous atteindre cet objectif et une plus de chose ici que je vois <a href="l'analyse.im/uploads/séminaire/pdf-échantillon.pdf"> directement href donné l'url .sans donner directement j'ai besoin de donner à l'intérieur ng-cliquez sur la fonction,u peut dire s'il vous plaît.
    Faire le télécharger via angularJS n'est pas un bon moyen. Mais si vous souhaitez définir l'URL de téléchargement via angularJS -> prendre un coup d'oeil à mon exemple.
    ok merci de la bouillie lin.
    désolé mec, je ne suis pas en mesure de voter ici,minimum je dois besoin de 15 de la réputation pour voter de toute façon je vous remercie.je vais essayer d'obtenir et de vote, c'est dans quelques jours,je vous remercie.
    Ne comprends pas pourquoi vous mettez ng-href="{{ fileHref() }} " au lieu de ng-href=" fileHref() " comme ng-href est angulaire de la directive. Mais, il fonctionne très bien pour l'interpolation pas pour le second.

    OriginalL'auteur lin

  2. 11

    J'ai eu pour obtenir la fonctionnalité. Devait aussi s'assurer qu'il fonctionne pour tous les principaux navigateurs pris en charge.
    Voici la solution pour les mêmes!!!

    Codage Heureux!!!

    Votre point de Vue/HTML

    <a target="_self" class="ui right floated btn btn-warning" href ng-click="downloadInvoice()"> Download </a>

    Votre Contrôleur

    $scope.downloadInvoice = function () {
    $http.post(url,requestData, {responseType:'arraybuffer',headers:header
        })
            .success(function (response) {
                var file = new Blob([response], {type: 'application/pdf'});

                var isChrome = !!window.chrome && !!window.chrome.webstore;
                var isIE = /*@cc_on!@*/false || !!document.documentMode;
                var isEdge = !isIE && !!window.StyleMedia;


                if (isChrome){
                    var url = window.URL || window.webkitURL;

                    var downloadLink = angular.element('<a></a>');
                    downloadLink.attr('href',url.createObjectURL(file));
                    downloadLink.attr('target','_self');
                    downloadLink.attr('download', 'invoice.pdf');
                    downloadLink[0].click();
                }
                else if(isEdge || isIE){
                    window.navigator.msSaveOrOpenBlob(file,'invoice.pdf');

                }
                else {
                    var fileURL = URL.createObjectURL(file);
                    window.open(fileURL);
                }

            })
};

    OriginalL'auteur Sagar Desai