使用服务器angularjs下载文件 [英] Download a file from server using angularjs

问题描述

我寻找一种方式，让用户选择一个文件存在于服务器上，并使用angularjs下载它，我发现这个code，没有工作，因此，没有人有正确的工作方式。

\r

\r

VAR内容='文件内容;\r
    VAR BLOB =新的Blob（[内容] {类型：text / plain的'}）;\r
      $ scope.download =功能（）{\r
\r
        $ window.location的=（window.URL || window.webkitUR​​L）.createObjectURL（BLOB）;\r
    }

\r

＆LT;输入类型=按钮值=下载下载=内容.TXTNG点击=下载（）/＆GT;

\r

\r

\r

解决方案

我做这种方式：

 ＆LT; A HREF =download.txt数据文件下载=真正的＆GT;下载＆LT; / A＆GT;
 

和使用指令：

  angular.module（应用）
    .directive（'fileDownload'，[功能（）{
        返回{
            限制：'A'，
            更换：真实，
            模板：'＆LT;按钮类=BTN BTN-默认的数据-NG-点击=下载（）＆GT;＆LT;跨度类=glyphicon glyphicon下载＆GT;＆LT; / SPAN＆GT;＆LT; /按钮＆GT; '，
            控制器：['$ rootScope'，'$范围，$元素，$ ATTRS'，'对话'，'$超时'，函数（$ rootScope，$范围，$元，$ ATTRS，对话框，$超时）{
                $ scope.progress = 0;                函数prepare（URL）{
                    dialogs.wait（请稍候，您的下载开始在几秒钟。，$ scope.progress）;
                    fakeProgress（）;
                }
                函数成功（URL）{
                    $ rootScope $广播（'dialogs.wait.complete'）。
                }
                功能错误（响应，URL）{
                    dialogs.error（无法处理您的下载！）;
                }                功能fakeProgress（）{
                    $超时（函数（）{
                        如果（$ scope.progress＆LT; 95）{
                            $ scope.progress + =（96  -  $ scope.progress）/ 2;
                            $ rootScope $广播（'dialogs.wait.progress'，{进步：$ scope.progress}）。
                            fakeProgress（）;
                        }
                    }，250）;
                }                $ scope.download =功能（）{
                    $ scope.progress = 0;
                    $ .fileDownload（$ attrs.href，{prepareCallback：prepare，successCallback：成功，failCallback：错误}）;
                }
            }]
        }
    }]）;
 

这使用jQuery的fileDownload功能来下载文件。 （注：也有生效的对话框类）

I searching for a way to enable the user select a file exists on the server and download it using angularjs , I found this code which didn't work , so does anyone have a way that works right

 var content = 'file content';
    var blob = new Blob([content], { type: 'text/plain' });
      $scope.download = function () {

        $window.location = (window.URL || window.webkitURL).createObjectURL(blob);
    }

    <input type="button" value="download" download="content.txt"   ng-click="download()"/>

解决方案

I do it this way:

<a href="download.txt" data-file-download="true">Download</a>

and use the directive:

angular.module('app')
    .directive('fileDownload', [function () {
        return {
            restrict: 'A',
            replace: true,
            template: '<button class="btn btn-default" data-ng-click="download()"><span class="glyphicon glyphicon-download"></span></button>',
            controller: ['$rootScope', '$scope', '$element', '$attrs', 'dialogs', '$timeout', function ($rootScope, $scope, $element, $attrs, dialogs, $timeout) {
                $scope.progress = 0;

                function prepare(url) {
                    dialogs.wait("Please wait", "Your download starts in a few seconds.", $scope.progress);
                    fakeProgress();
                }
                function success(url) {
                    $rootScope.$broadcast('dialogs.wait.complete');
                }
                function error(response, url) {
                    dialogs.error("Couldn't process your download!");
                }

                function fakeProgress() {
                    $timeout(function () {
                        if ($scope.progress < 95) {
                            $scope.progress += (96 - $scope.progress) / 2;
                            $rootScope.$broadcast('dialogs.wait.progress', { 'progress': $scope.progress });
                            fakeProgress();
                        }
                    }, 250);
                }

                $scope.download = function () {
                    $scope.progress = 0;
                    $.fileDownload($attrs.href, { prepareCallback: prepare, successCallback: success, failCallback: error });
                }
            }]
        }
    }]);

this uses the jQuery fileDownload function to download the file. (note: there is also the dialogs class in effect)

这篇关于使用服务器angularjs下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！