角6从API下载excel [英] angular 6 download excel from API
问题描述
我正在尝试从服务器下载Excel文件. UI为角度6,服务为C#Web API.首先,我不知道此下载方法是否需要为HTTPGET或HTTPPOST.在其他论坛的帮助下,我在下面编写了代码.我没有看到任何错误,也没有看到调试器停止在subscription方法内.当我单击文件链接以从angular应用程序下载时,页面重定向到localhost:端口(起始页面)
I am trying to download an excel file from server. UI is in angular 6 and service is C# Web API. Firstly, I am not getting whether this download method need to be HTTPGET or HTTPPOST. Using some help from other forum, I have written code below. I don't see any error nor I see that debugger stop inside subscribe method. when I click on file link to download from angular app the page redirect to localhost: port (start page)
[HttpGet]//http get as it return file
public HttpResponseMessage DownloadAttachment(string fileName)
{
//below code locate physical file on server
var localFilePath = HttpContext.Current.Server.MapPath("../../uploadFiles/" + fileName);
HttpResponseMessage response = null;
if (!File.Exists(localFilePath))
{
//if file not found than return response as resource not present
response = Request.CreateResponse(HttpStatusCode.Gone);
}
else
{
//if file present than read file
var fStream = new FileStream(localFilePath, FileMode.Open, FileAccess.Read);
//compose response and include file as content in it
response = new HttpResponseMessage
{
StatusCode = HttpStatusCode.OK,
// Content = new StreamContent(fStream)
Content = new StreamContent(fStream)
};
//set content header of reponse as file attached in reponse
response.Content.Headers.ContentDisposition =
new ContentDispositionHeaderValue("attachment")
{
FileName = Path.GetFileName(fStream.Name)
};
//set the content header content type as application/octet-stream as it
//returning file as reponse
response.Content.Headers.ContentType = new
MediaTypeHeaderValue("application/octet-stream");
response.Content.Headers.ContentLength = fStream.Length;
response.Headers.Add("fileName", fileName);
}
return response;
}
现在,来自Angular调用:
Now, from Angular calling:
downloadFile(fileName: string) {
this.Service.postAndGetResponse(fileName).subscribe(fileData => {
// const b: any = new Blob([fileData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// .map(res => new Blob([res.blob()],{ type: 'application/vnd.ms-excel' }));
// const url = window.URL.createObjectURL(b);
// window.open(url);
console.log (fileData);
}
);
}
在Service.ts
in Service.ts
postAndGetResponse(fileName) {
return this.http.get(this.baseURL + 'DataEvent/DownloadEventAttachment?fileName=' + fileName, {responseType: 'blob' as 'blob'}).pipe(
map((x) => {
return x;
})
);
}
我已将调试器放在subscribe中的downloadFile方法中,但是它从未停止过,就好像什么都没有返回或调用丢失一样.
I have put debugger in downloadFile method inside subscribe, but it never stops there as if nothing is returned or call is lost.
当我使用邮递员调用WEB API方法时,将返回响应.我没有看到任何文本格式-它似乎已损坏/二进制?响应正文中的格式如下:
When I use postman to call WEB API method, the response is returned. I don't see any text format- it seems to be corrupted/binary?? the format is like below in response body:
��ࡱ�>�� �����������������
推荐答案
我试图重现您的代码.以下代码有效.更改postAndGetResponse中的代码只会返回http get调用.
I tried to reproducing your code. Following code is worked. Change code in postAndGetResponse only return http get call.
您可以使用链接或FileSaver
保存Blob内容.
You can use link or FileSaver
to save blob content.
postAndGetResponse(fileName) {
return this.http.get('http://localhost:62292' + '/api/TestExport/DownloadAttachment?fileName=' + fileName, { responseType: 'blob' as 'blob' });
}
更新下载文件方法
downloadFile(fileName: string) {
this.settingService.postAndGetResponse(fileName).subscribe(fileData => {
const blob: any = new Blob([fileData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
let link = document.createElement("a");
if (link.download !== undefined) {
let url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
);
}
和API代码,将动词更改为[AcceptVerbs("GET")]
And API code, change verb to [AcceptVerbs("GET")]
public class TestExportController : ApiController
{
[Route("api/TestExport/DownloadAttachment")]
[AcceptVerbs("GET")]
public HttpResponseMessage DownloadAttachment(string fileName)
{
//below code locate physical file on server
var localFilePath = HttpContext.Current.Server.MapPath("../../uploadFiles/" + fileName);
HttpResponseMessage response = null;
if (!File.Exists(localFilePath))
{
//if file not found than return response as resource not present
response = Request.CreateResponse(HttpStatusCode.Gone);
}
else
{
//if file present than read file
var fStream = new FileStream(localFilePath, FileMode.Open, FileAccess.Read);
//compose response and include file as content in it
response = new HttpResponseMessage
{
StatusCode = HttpStatusCode.OK,
// Content = new StreamContent(fStream)
Content = new StreamContent(fStream)
};
//set content header of reponse as file attached in reponse
response.Content.Headers.ContentDisposition =
new ContentDispositionHeaderValue("attachment")
{
FileName = Path.GetFileName(fStream.Name)
};
//set the content header content type as application/octet-stream as it
//returning file as reponse
response.Content.Headers.ContentType = new
MediaTypeHeaderValue("application/octet-stream");
response.Content.Headers.ContentLength = fStream.Length;
response.Headers.Add("fileName", fileName);
}
return response;
}
}
这篇关于角6从API下载excel的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!