Question

用例：输入字段接收.RDL文件，将在其上执行某些操作。然后将此文件发送到.NET Web Api服务，在该服务中进行处理，处理完成后，将处理后的文件返回给用户。客户端使用Angular2实现。

查看模板

<h3 align="center" class="title" onClick="window.location.reload()">
   Converter Utility
</h3>
<div align="center">
   <input type="file" accept=".rdl" (change)="changeListener($event)"/>
   <br>
   <br>
   <input id="replace" name="replace" type="checkbox"> Replace the file?<br>
   <label></label>
   <br>
   <br>
   <input type="button" value="Process" (click)="doProcess()" />
   <br>
   <br>
</div>

组件

import { Component } from '@angular/core';
import { MainService } from './services/main.service';

@Component({
  selector: 'converter-utility',
  templateUrl: './app/views/main.component.html',
  providers: [MainService],
  styleUrls: ['./app/views/css/main.component.css']
})

export class AppComponent {
  private workableFile: any;

  constructor(
    private mainService: MainService
    ) { }

  changeListener($event): void {
    this.workableFile = $event.target.files[0];
  }

  doProcess() {
    var myReader: FileReader = new FileReader();
    var serv = this.mainService;

    myReader.readAsText(this.workableFile);
    myReader.onload = (e) => {
      serv.passFileUrl(myReader.result)
                    .subscribe((data: any) => { 
                    try 
                    {
                      window.navigator.msSaveOrOpenBlob(data, this.workableFile.name);
                    } 
                    catch (err)
                    {
                    var url = window.URL.createObjectURL(data);
                    window.open(url);
                    }
                  });
    }
  }
}

服务

import { Injectable } from '@angular/core';
import { Http, Headers, Response,ResponseContentType } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

@Injectable()
export class MainService {
   private projectURL = 'http://localhost:64895/api/Process/RetrieveFile';
   private headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8' });

   constructor(private http: Http) { }

   passFileUrl(result) {
           var json = JSON.stringify(result);
           return this.http.post(this.projectURL, json, {
                                                           headers: this.headers, 
                                                           responseType: ResponseContentType.Blob})
                           .map((response) => {
                               return new Blob([response.blob()], {type:'application/octet-stream'});
                           });
   }
}

WebApi上吐出固定文件的方法

private HttpResponseMessage SaveFile()
{
    HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
    response.Content = new StringContent(_copyFile.GetCopiedFile.OuterXml);
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
    response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
    response.Content.Headers.ContentDisposition.FileName = "FixedDocument.rdl";
    return response;
}

问题

返回的文件存在以下问题，我需要解决这个问题：

该文件有一个＆＃39;文件名＆＃39;这是一个GUID（在Chrome中测试）。我希望文件名是FixedDocument.rdl，但这不会传递给我的Angular2控制器。
该文件也不包含任何扩展名，因此浏览器不确定如何处理它。该文件采用XML格式。

内容很好，修复程序就像预期的那样。因此，在与我的团队讨论之后，我们发现问题可能出在Angular侧Blob类和Content-Disposition。

如何解决这个问题？

我们已尝试按照许多其他帖子中的建议使用Content-Disposition，但是，这似乎并未得到尊重并且已分配GUID。

从.NET Web API发送到Angular2 App时，不遵守文件名和扩展名

0 个答案: