[英]Angular TypeScript client generated from an ASP.NET Core 3.1 application is not working
[英]How to consume a asp.net core 3.1 web api returning a file with open api client side generated code for typescript(angular)
这就是问题所在。 I have a web api method that generates a pdf using DinktoPdf and I want to return it to the angular client and show it on a pop-pup but cant seem to open it. 这是我的 api 的代码:
[HttpGet("PrintGravimetricSheetReport")]
[SwaggerOperation(OperationId = "PrintGravimetricSheetReport")]
[SwaggerResponse(200, "Ok", typeof(File))]
[SwaggerResponse(400, "Bad Request", typeof(ErrorResponse))]
public async Task<IActionResult> PrintGravimetricSheetReport()
{
var vm = new QuoteLineItemModel();
var documentContent = await _templateService.RenderTemplateAsync("GravSheet", vm);
string folderPath = _hostEnvironment.ContentRootPath + "\\GeneratedDocs\\GravSheets\\";
if (!Directory.Exists(folderPath))
Directory.CreateDirectory(folderPath);
var fileName = folderPath + "GravSheet_Report.pdf".AppendTimeStamp();
var globalSettings = new GlobalSettings
{
ColorMode = ColorMode.Color,
Orientation = Orientation.Portrait,
PaperSize = PaperKind.A4,
Margins = new MarginSettings(){Top =10},
DocumentTitle = "GravSheet Report",
Out = fileName
};
var objectSettings = new ObjectSettings
{
PagesCount = true,
HtmlContent = documentContent,
WebSettings = { DefaultEncoding = "utf-8" },
HeaderSettings = { FontName = "Arial", FontSize = 9, Right = "Page [page] of [toPage]", Line = true},
FooterSettings = { FontName = "Arial", FontSize = 9, Line = true, Center = "Report Footer"}
};
var pdf = new HtmlToPdfDocument
{
GlobalSettings = globalSettings,
Objects = {objectSettings}
};
var file = _converter.Convert(pdf);
return File(file, "application/pdf");
}
as you can observe there I'm using swagger to document my api and also I use Open-Api to generate the typescript client side for the angular client. 这是自动生成的代码:
import { Inject, Injectable, Optional } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams,
HttpResponse, HttpEvent, HttpParameterCodec } from '@angular/common/http';
import { CustomHttpParameterCodec } from '../encoder';
import { Observable } from 'rxjs';
import { ErrorResponse } from '../model/errorResponse';
import { BASE_PATH, COLLECTION_FORMATS } from '../variables';
import { Configuration } from '../configuration';
@Injectable({
providedIn: 'root'
})
export class ReportsService {
protected basePath = 'http://localhost';
public defaultHeaders = new HttpHeaders();
public configuration = new Configuration();
public encoder: HttpParameterCodec;
constructor(protected httpClient: HttpClient, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
if (configuration) {
this.configuration = configuration;
}
if (typeof this.configuration.basePath !== 'string') {
if (typeof basePath !== 'string') {
basePath = this.basePath;
}
this.configuration.basePath = basePath;
}
this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
}
/**
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public printGravimetricSheetReport(observe?: 'body', reportProgress?: boolean): Observable<object>;
public printGravimetricSheetReport(observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<object>>;
public printGravimetricSheetReport(observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<object>>;
public printGravimetricSheetReport(observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
let headers = this.defaultHeaders;
// to determine the Accept header
const httpHeaderAccepts: string[] = [
'text/plain',
'application/json',
'text/json'
];
const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
if (httpHeaderAcceptSelected !== undefined) {
headers = headers.set('Accept', httpHeaderAcceptSelected);
}
return this.httpClient.get<object>(`${this.configuration.basePath}/api/Reports/PrintGravimetricSheetReport`,
{
withCredentials: this.configuration.withCredentials,
headers: headers,
observe: observe,
reportProgress: reportProgress
}
);
}
}
这是我试图在客户端打开 api 返回的 object :
printGravSheet(): void {
this.reportService.printGravimetricSheetReport().subscribe(response => {
const blob = new Blob([response], { type: 'application/pdf' });
const url = window.URL.createObjectURL(response);
const showWindow = window.open(url);
if (!showWindow || showWindow.closed || typeof showWindow.closed === 'undefined') {
alert('Please disable your Pop-up blocker and try again');
}
});
}
并从中获取错误消息。 请有人指出正确的方法来做到这一点。 提前致谢。
所以环顾四周我发现你需要删除web api上的行:
Out = fileName
web api 最终版本为:
[HttpGet("PrintGravimetricSheetReport")]
[SwaggerOperation(OperationId = "PrintGravimetricSheetReport")]
[SwaggerResponse(200, "Ok", typeof(FileContentResult))]
[SwaggerResponse(400, "Bad Request", typeof(ErrorResponse))]
public async Task<IActionResult> PrintGravimetricSheetReport()
{
var vm = new QuoteLineItemModel();
var documentContent = await _templateService.RenderTemplateAsync("GravSheet", vm);
var globalSettings = new GlobalSettings
{
ColorMode = ColorMode.Color,
Orientation = Orientation.Portrait,
PaperSize = PaperKind.A4,
Margins = new MarginSettings(){Top =10},
DocumentTitle = "GravSheet Report",
};
var objectSettings = new ObjectSettings
{
PagesCount = true,
HtmlContent = documentContent,
WebSettings = { DefaultEncoding = "utf-8" },
HeaderSettings = { FontName = "Arial", FontSize = 9, Right = "Page [page] of [toPage]", Line = true},
FooterSettings = { FontName = "Arial", FontSize = 9, Line = true, Center = "Report Footer"}
};
var pdf = new HtmlToPdfDocument
{
GlobalSettings = globalSettings,
Objects = {objectSettings}
};
var file = _converter.Convert(pdf);
return File(file, "application/pdf");
}
angular中的组件方法为:
printGravSheet(): void {
this.reportService.printGravimetricSheetReport().subscribe((blobResponse: Blob) => {
const fileUrl = window.URL.createObjectURL(blobResponse);
const showWindow = window.open(fileUrl);
if (!showWindow || showWindow.closed || typeof showWindow.closed === 'undefined') {
alert('Please disable your Pop-up blocker and try again');
}
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.