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

Question

我制作了一个 Java 微服务，可以将 table 从数据库导出到 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'}
    })
};

});

我做错了什么？

Answer 1

考虑使用 ngFileSaver

示例：

JS

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>

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

Angular get CSV file in browser by calling URL

javascript

java

angularjs

microservices

angularjs-ng-click