使用angularjs下载文件

时间:2016-10-31 16:41:59

标签: html angularjs

我正在尝试下载文件,以便用户可以选择打开或保存。他们点击文件名:

<a href data-ng-click="getFile(file.id)">
                    {{file.name}}</span>
                </a>

然后调用angular js文件中的方法

$scope.getFile= function ($id) {
    var getInputFilePromise = fileFactory.getInputFile($id);
    getFilePromise.success(function ($data) {
        var blob = new Blob([$data], {type: 'text/csv'});
        //code to allow downloading file
});
}

工厂有以下代码从java控制器获取byte []:

getFile: function ($id) {
        return $http.get('/downloadFile?id=' + $id, {responseType:'arraybuffer'});
    }

从我的getFile方法可以看出,我将数据转换为blob,但我无法将其发送到html。我已尝试在这里发布了许多解决方案但没有一个有效。

var blob = new Blob([$data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
        var objectUrl = URL.createObjectURL(blob);
        window.open(objectUrl);

上面的代码片段允许下载文件,但Excel无法打开它。

任何帮助都会很棒,因为我是棱角分明的新手。我还想避免使用FileSaver.js

我也尝试了以下但是它不起作用。

var hiddenElement = document.createElement('a');
            hiddenElement.href = 'data:attachment/csv,' + encodeURI($data);
            hiddenElement.target = '_blank';
            hiddenElement.download = fileName;
            hiddenElement.click();

1 个答案:

答案 0 :(得分:0)

在getFile方法的第一行尝试使用类似的东西:

var fileName = "outputfile.pdf";
var a = document.createElement("a");

在你的成功中:

getFilePromise.success(function ($data) {
    var file = new Blob([data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    a.href = fileURL;
    a.download = fileName;
    a.click();
}