Angular通过调用URL在浏览器中获取CSV文件答案

【问题标题】：Angular get CSV file in browser by calling URLAngular通过调用URL在浏览器中获取CSV文件
【发布时间】：2017-01-19 15:28:05
【问题描述】：

我创建了一个 Java 微服务，可以将数据库中的表导出到 CSV 文件中，并按照以下步骤在浏览器中获取它：Downloading a CSV File in Browser by using Java 它运行良好，当我调用 URL（通过在浏览器中复制和粘贴）时，我在浏览器中获取了文件： http://localhost:8080/api/fileDownload/2

在 Angular 部分，当我在控制台中看到我在应用程序中调用 URL 时：

Request URL:http://localhost:8080/api/fileDownload/2
Request Method:GET
Status Code:200

在控制台的预览和响应中，我也有我的文件的内容。所以看起来一切都很好，但问题是我的浏览器没有自动下载文件。

我的控制器：

vm.downloadFunction=function(){
    FileDownload.download.query({id:2},function(data){
    });
};

我的看法：

 <label data-ng-click="addModule.downloadFunction()" class="btn btn-link btn-file">
                    Download <input type="button" class="hidden">
                </label>

还有服务：

voltApp.factory('FileDownload', function ($resource) {
return{
    download:  $resource('/api/fileDownload/:id', {}, {
        query: {method: 'GET', params: {id:'@id'},isArray:false},
        update:{method: 'PUT'}
    })
};

});

我做错了什么？

【问题讨论】：

这篇文章也很有帮助！ stackoverflow.com/questions/14215049/…

标签： javascript java angularjs microservices angularjs-ng-click

【解决方案1】：

考虑使用ngFileSaver

例子：

function ExampleCtrl(FileSaver, Blob) {
  var vm = this;

  vm.val = {
    text: 'Hey ho lets go!'
  };

  vm.download = function(text) {
    var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
    FileSaver.saveAs(data, 'text.txt');
  };
}

angular

      .module('fileSaverExample', ['ngFileSaver'])
      .controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);

HTML

<div class="wrapper" ng-controller="ExampleCtrl as vm">
  <textarea
    ng-model="vm.val.text"
    name="textarea" rows="5" cols="20">
      Hey ho let's go!
  </textarea>
  <a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)">
    Download
  </a>
</div>

【讨论】：