怎样下载与Angular2文件怎样下载与Angular2文件(How do I download a

我有我正在开发一个客户端angular2（更换MVC）一个的WebAPI / MVC应用程序。 我有一些麻烦了解如何角保存文件。

该请求是确定的（正常工作与MVC，我们可以登录接收到的数据），但我无法弄清楚如何保存下载的数据（我主要是遵循同样的逻辑这篇文章 ）。 我相信这是愚蠢的简单，但到目前为止，我根本就没有抓住它。

该组件功能的代码如下。 我尝试过不同的方案，则斑的方法应该是，据我了解的路要走，但没有功能createObjectURL的URL 。 我甚至不能找到的定义URL窗口，但显然它的存在。 如果我使用FileSaver.js模块我得到同样的错误。 所以我想这一点是最近变更或尚未实现。 我怎样才能触发文件保存在A2？

downloadfile(type: string){

    let thefile = {};
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    let url = window.URL.createObjectURL(thefile);
    window.open(url);
}

为了完整起见，获取数据服务是下面的，但它的唯一的事情就是发出请求和数据传递不映射如果成功：

downloadfile(runname: string, type: string){
   return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
            .catch(this.logAndPassOn);
}

Answer 1:

问题是，在另一种情况下可观察到的运行，所以当你尝试创建URL变种，你有一个空的对象，而不是你想要的斑点。

一个存在解决这个是如下的许多方面：

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

当请求就绪时，它会调用定义如下函数“downloadFile”：

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

斑已经完全建立，因此该URL变种，如果不打开新窗口，请检查您是否已经导入“rxjs /接收”;

  import 'rxjs/Rx' ;

我希望这可以帮助你。

Answer 2:

试试这个 ！

1 - 作秀安装依附保存/打开文件弹出

npm install file-saver --save
npm install @types/file-saver --save

2-用此函数来recive数据创建服务

downloadFile(id): Observable<Blob> {
    let options = new RequestOptions({responseType: ResponseContentType.Blob });
    return this.http.get(this._baseUrl + '/' + id, options)
        .map(res => res.blob())
        .catch(this.handleError)
}

3-在组件解析与“文件保护程序”团块

import {saveAs as importedSaveAs} from "file-saver";

  this.myService.downloadFile(this.id).subscribe(blob => {
            importedSaveAs(blob, this.fileName);
        }
    )

这对我的作品！

Answer 3:

如果您不需要在请求中添加页眉，下载文件在Angular2你可以做一个简单的：

window.location.href='http://example.com/myuri/report?param=x';

在你的组件。

Answer 4:

这是人们在寻找如何使用的HttpClient和文件保护做到这一点：

1. 安装文件金丹

NPM安装文件金丹--save

NPM安装@类型/文件金丹--save

API服务类：

export() {
    return this.http.get(this.download_endpoint, 
        {responseType: 'blob'});
}

零件：

import { saveAs } from 'file-saver';
exportPdf() {
    this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}

Answer 5:

正如提到的亚历杭德罗·Corredor这是一个简单的范围错误。 该subscribe是异步运行和open必须放置在此背景下，这样的数据加载完成时，我们触发下载。

这就是说，有这样做的两种方式。 由于文档推荐服务负责获取和映射数据：

//On the service:
downloadfile(runname: string, type: string){
  var headers = new Headers();
  headers.append('responseType', 'arraybuffer');
  return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
            .map(res => new Blob([res],{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
            .catch(this.logAndPassOn);
}

然后，在部件上，我们只是订阅和处理映射的数据。 有两种可能性。 首先 ，作为建议在原岗位，但亚历杭德罗·指出需要一个小的修正：

//On the component
downloadfile(type: string){
  this.pservice.downloadfile(this.rundata.name, type)
      .subscribe(data => window.open(window.URL.createObjectURL(data)),
                  error => console.log("Error downloading the file."),
                  () => console.log('Completed file download.'));
  }

第二种方法是使用的FileReader。 其中的逻辑是相同的，但我们可以明确等待的FileReader加载数据，避免嵌套，并且解决了异步问题。

//On the component using FileReader
downloadfile(type: string){
    var reader = new FileReader();
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(res => reader.readAsDataURL(res), 
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    reader.onloadend = function (e) {
        window.open(reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no');
  }
}

注：我尝试下载一个Excel文件，即使下载被触发（所以这个答案），该文件已损坏。 一看便知这个职位 ，以避免损坏的文件。

Answer 6:

对角2.4.x的下载* .zip文件的解决方案：必须从导入ResponseContentType“@角/ HTTP”和变化的responseType到ResponseContentType.ArrayBuffer（默认情况下它ResponseContentType.Json）

getZip(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
 let headers = this.setHeaders({
      'Content-Type': 'application/zip',
      'Accept': 'application/zip'
    });

 return this.http.get(`${environment.apiUrl}${path}`, { 
   headers: headers, 
   search: params, 
   responseType: ResponseContentType.ArrayBuffer //magic
 })
          .catch(this.formatErrors)
          .map((res:Response) => res['_body']);
}

Answer 7:

这个怎么样？

this.http.get(targetUrl,{responseType:ResponseContentType.Blob})
        .catch((err)=>{return [do yourself]})
        .subscribe((res:Response)=>{
          var a = document.createElement("a");
          a.href = URL.createObjectURL(res.blob());
          a.download = fileName;
          // start download
          a.click();
        })

我可以用它做。
无需要额外的包。

Answer 8:

对于较新版本的角度：

npm install file-saver --save
npm install @types/file-saver --save


import {saveAs} from 'file-saver/FileSaver';

this.http.get('endpoint/', {responseType: "blob", headers: {'Accept': 'application/pdf'}})
  .subscribe(blob => {
    saveAs(blob, 'download.pdf');
  });

Answer 9:

通过Ajax下载文件始终是一个痛苦的过程，并在我看来，最好是让服务器和浏览器做的内容类型的协商，这项工作。

我认为它最好能有

<a href="api/sample/download"></a> 

去做吧。 这甚至不需要任何新窗口打开之类的东西。

在MVC控制器的样品中可以像下面这样：

[HttpGet("[action]")]
public async Task<FileContentResult> DownloadFile()
{
    // ...
    return File(dataStream.ToArray(), "text/plain", "myblob.txt");
}

Answer 10:

对于那些使用终极版模式

我在文件金丹为@Hector奎瓦斯在他的回答命名添加。 使用Angular2诉2.3.1，我没必要在@类型/文件金丹添加。

下面的例子就是下载日志为PDF。

该杂志的行为

public static DOWNLOAD_JOURNALS = '[Journals] Download as PDF';
public downloadJournals(referenceId: string): Action {
 return {
   type: JournalActions.DOWNLOAD_JOURNALS,
   payload: { referenceId: referenceId }
 };
}

public static DOWNLOAD_JOURNALS_SUCCESS = '[Journals] Download as PDF Success';
public downloadJournalsSuccess(blob: Blob): Action {
 return {
   type: JournalActions.DOWNLOAD_JOURNALS_SUCCESS,
   payload: { blob: blob }
 };
}

该杂志的影响

@Effect() download$ = this.actions$
    .ofType(JournalActions.DOWNLOAD_JOURNALS)
    .switchMap(({payload}) =>
        this._journalApiService.downloadJournal(payload.referenceId)
        .map((blob) => this._actions.downloadJournalsSuccess(blob))
        .catch((err) => handleError(err, this._actions.downloadJournalsFail(err)))
    );

@Effect() downloadJournalSuccess$ = this.actions$
    .ofType(JournalActions.DOWNLOAD_JOURNALS_SUCCESS)
    .map(({payload}) => saveBlobAs(payload.blob, 'journal.pdf'))

日志服务

public downloadJournal(referenceId: string): Observable<any> {
    const url = `${this._config.momentumApi}/api/journals/${referenceId}/download`;
    return this._http.getBlob(url);
}

HTTP服务

public getBlob = (url: string): Observable<any> => {
    return this.request({
        method: RequestMethod.Get,
        url: url,
        responseType: ResponseContentType.Blob
    });
};

该杂志减速 虽然这只会在我们的应用程序中使用正确的状态我还是希望它添加到显示完整的图案。

case JournalActions.DOWNLOAD_JOURNALS: {
  return Object.assign({}, state, <IJournalState>{ downloading: true, hasValidationErrors: false, errors: [] });
}

case JournalActions.DOWNLOAD_JOURNALS_SUCCESS: {
  return Object.assign({}, state, <IJournalState>{ downloading: false, hasValidationErrors: false, errors: [] });
}

我希望这是有帮助的。

Answer 11:

我分享，帮助我（任何改善是极大的赞赏）解决方案

在您服务 “pservice”：

getMyFileFromBackend(typeName: string): Observable<any>{
    let param = new URLSearchParams();
    param.set('type', typeName);
    // setting 'responseType: 2' tells angular that you are loading an arraybuffer
    return this.http.get(http://MYSITE/API/FILEIMPORT, {search: params, responseType: 2})
            .map(res => res.text())
            .catch((error:any) => Observable.throw(error || 'Server error'));
}

组件部分：

downloadfile(type: string){
   this.pservice.getMyFileFromBackend(typename).subscribe(
                    res => this.extractData(res),
                    (error:any) => Observable.throw(error || 'Server error')
                );
}

extractData(res: string){
    // transforme response to blob
    let myBlob: Blob = new Blob([res], {type: 'application/vnd.oasis.opendocument.spreadsheet'}); // replace the type by whatever type is your response

    var fileURL = URL.createObjectURL(myBlob);
    // Cross your fingers at this point and pray whatever you're used to pray
    window.open(fileURL);
}

在组成部分，您拨打的服务没有订阅的响应。 该认购的OpenOffice MIME类型的完整列表，请参阅： http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html

Answer 12:

要下载和显示PDF文件时，剪断了非常相似的代码是象下面这样：

  private downloadFile(data: Response): void {
    let blob = new Blob([data.blob()], { type: "application/pdf" });
    let url = window.URL.createObjectURL(blob);
    window.open(url);
  }

  public showFile(fileEndpointPath: string): void {
    let reqOpt: RequestOptions = this.getAcmOptions();  //  getAcmOptions is our helper method. Change this line according to request headers you need.
    reqOpt.responseType = ResponseContentType.Blob;
    this.http
      .get(fileEndpointPath, reqOpt)
      .subscribe(
        data => this.downloadFile(data),
        error => alert("Error downloading file!"),
        () => console.log("OK!")
      );
  }

Answer 13:

我使用的4角与4.3 HttpClient的对象。 我修改的答案，我在它创建了一个链接对象，用它做的js下载技术博客中，然后将它摧毁。

客户：

doDownload(id: number, contentType: string) {
    return this.http
        .get(this.downloadUrl + id.toString(), { headers: new HttpHeaders().append('Content-Type', contentType), responseType: 'blob', observe: 'body' })
}

downloadFile(id: number, contentType: string, filename:string)  {

    return this.doDownload(id, contentType).subscribe(  
        res => { 
            var url = window.URL.createObjectURL(res);
            var a = document.createElement('a');
            document.body.appendChild(a);
            a.setAttribute('style', 'display: none');
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove(); // remove the element
        }, error => {
            console.log('download error:', JSON.stringify(error));
        }, () => {
            console.log('Completed file download.')
        }); 

} 

this.downloadUrl的值已设置为指向API。 我用这来下载附件，所以我知道ID，则contentType和文件名：我使用的是MVC API返回的文件：

 [ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
    public FileContentResult GetAttachment(Int32 attachmentID)
    { 
        Attachment AT = filerep.GetAttachment(attachmentID);            
        if (AT != null)
        {
            return new FileContentResult(AT.FileBytes, AT.ContentType);  
        }
        else
        { 
            return null;
        } 
    } 

附件类看起来是这样的：

 public class Attachment
{  
    public Int32 AttachmentID { get; set; }
    public string FileName { get; set; }
    public byte[] FileBytes { get; set; }
    public string ContentType { get; set; } 
}

该filerep库返回从数据库中的文件。

希望这可以帮助别人:)

Answer 14:

更新赫克托的答案使用文件保护和HttpClient的第2步：

public downloadFile(file: File): Observable<Blob> {
    return this.http.get(file.fullPath, {responseType: 'blob'})
}

Answer 15:

这里的东西我在我的情况一样 -

// service method
downloadFiles(vendorName, fileName) {
    return this.http.get(this.appconstants.filesDownloadUrl, { params: { vendorName: vendorName, fileName: fileName }, responseType: 'arraybuffer' }).map((res: ArrayBuffer) => { return res; })
        .catch((error: any) => _throw('Server error: ' + error));
}

// a controller function which actually downloads the file
saveData(data, fileName) {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    let blob = new Blob([data], { type: "octet/stream" }),
        url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
}

// a controller function to be called on requesting a download
downloadFiles() {
    this.service.downloadFiles(this.vendorName, this.fileName).subscribe(data => this.saveData(data, this.fileName), error => console.log("Error downloading the file."),
        () => console.info("OK"));
}

该解决方案由参考- 在这里

Answer 16:

这将是更好，如果你尝试里面，你调用新的方法subscribe

this._reportService.getReport()
    .subscribe((data: any) => {
        this.downloadFile(data);
    },
        (error: any) => onsole.log(error),
        () => console.log('Complete')
    );

里面downloadFile(data)的功能，我们需要做block, link, href and file name

downloadFile(data: any, type: number, name: string) {
    const blob = new Blob([data], {type: 'text/csv'});
    const dataURL = window.URL.createObjectURL(blob);

    // IE doesn't allow using a blob object directly as link href
    // instead it is necessary to use msSaveOrOpenBlob
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob);
      return;
    }

    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'export file.csv';
    link.click();

    setTimeout(() => {

      // For Firefox it is necessary to delay revoking the ObjectURL
      window.URL.revokeObjectURL(dataURL);
      }, 100);
    }
}

Answer 17:

我从角2下载一个解决方案，而越来越腐败，使用Spring MVC和2角

一号通我的返回类型是： -从Java结束ResponseEntity。 这里我送byte []数组已经从控制器返回类型。

2阶，包括你的工作空间，在索引页的filesaver：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

3rd-在部件TS写这样的代码：

import {ResponseContentType} from '@angular.core';

let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
        let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
            this.http
            .post('/project/test/export',
                    somevalue,options)
              .subscribe(data => {

                  var mediaType = 'application/vnd.ms-excel';
                  let blob: Blob = data.blob();
                    window['saveAs'](blob, 'sample.xls');

                });

这会给你的xls文件格式。 如果你想其他格式更改右扩展的介质类型和文件名。

Answer 18:

 let headers = new Headers({
                'Content-Type': 'application/json',
                'MyApp-Application': 'AppName',
                'Accept': 'application/vnd.ms-excel'
            });
            let options = new RequestOptions({
                headers: headers,
                responseType: ResponseContentType.Blob
            });


this.http.post(this.urlName + '/services/exportNewUpc', localStorageValue, options)
                .subscribe(data => {
                    if (navigator.appVersion.toString().indexOf('.NET') > 0)
                    window.navigator.msSaveBlob(data.blob(), "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+".xlsx");

                    else {
                        var a = document.createElement("a");
                        a.href = URL.createObjectURL(data.blob());
                        a.download = "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+ ".xlsx";
                        a.click();
                    }
                    this.ui_loader = false;
                    this.selectedexport = 0;
                }, error => {
                    console.log(error.json());
                    this.ui_loader = false;
                    document.getElementById("exceptionerror").click();
                });

Answer 19:

只要把url为href如下。

<a href="my_url">Download File</a>

文章来源: How do I download a file with Angular2