从 API 读取文件及其属性并在 Angular 客户端下载
Read file and its properties from API and download it in Angular Client
需要根据类型下载客户端api返回的动态文件。这就是我的
我的api控制器看起来像这样
public async Task<IActionResult> GetFile(int id)
{
IBaseResult<UserDetails> result = await _Bo.GetUSerDetails(id);
//result will have content likes
//1. FileName//fileaname.{extention}
//2. FileType//eg.application/pdf or application/doc
//3. FileContent//byte[]
if (result.Data != null)
{
response.Success = result.success;
response.Data = result.Data;
return Ok(response);
}
}
.ts 文件看起来像这样
data.service.ts
getResume(methodName: string, id :string): Observable<any> {
let httpOptions = this.getAuthoriseHeader();
return this.http.get(environment.baseApiUrl + methodName + id, { headers: httpOptions, observe: 'response', responseType: 'blob' });
}
view.component.ts
this.dataservice.getResume(method, id).subscribe(result => {
var resume = result["data"];
var fileName = resume.resumeName;
var fileType = resume.resumeType;
const file = new Blob([resume.resume], { type: fileType });//Is this correct or do i need to use 'application/octet-stream' here?
saveAs(file, fileName);
});
上面的实现文件正在下载,但是当我尝试打开文件时,显示如下
我的响应对象是
更新:
我在我的 .ts 文件中试过这个
var 文件名 = resume.resumeName;
var 文件类型 = resume.resumeType;
//var byteArray = new Uint8Array(resume.resume);
const file = new Blob([resume.resume], { type: 'application/octet-stream' });
this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file));
let a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = this.fileUrl;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(this.fileUrl);
a.remove();
文件正在下载 失败 - 没有文件 错误
这是我下载文件的方式(Excel 在我的例子中,但我认为这没有什么不同,因为我们都使用 Blob)。我已经安装了 ngx-filesaver 并将其用作依赖项注入。
import { FileSaverService } from 'ngx-filesaver';
constructor(
private http: HttpClient,
private fileSaver: FileSaverService
) {}
export(): Observable<any> {
const body = {...};
return this.http.post(`${environment.api}/export`, body, {
responseType: 'blob',
observe: 'response',
});
}
anotherFunction() {
this.export().subscribe(({ body, headers }: HttpResponse<any>) => {
const blob = new Blob([body], { type: headers.get('content-type') });
this.fileSaverService.save(blob, 'your_file_name.xlsx');
});
}
编辑
这是console.log(body, headers)
的画面
我终于找到了解决方案并且现在工作正常。我怀疑这是将我的 blob 数据转换为保存的问题。
const binaryString = window.atob(resume.resume); // Comment this if not using base64
const bytes = new Uint8Array(binaryString.length);
return bytes.map((byte, i) => binaryString.charCodeAt(i));
然后我用了
const blob = new Blob([body]);
//rest of the code is same as posted question
这篇文章对解决问题很有帮助
https://medium.com/@riccardopolacci/download-file-in-javascript-from-bytea-6a0c5bb3bbdb
需要根据类型下载客户端api返回的动态文件。这就是我的
我的api控制器看起来像这样
public async Task<IActionResult> GetFile(int id)
{
IBaseResult<UserDetails> result = await _Bo.GetUSerDetails(id);
//result will have content likes
//1. FileName//fileaname.{extention}
//2. FileType//eg.application/pdf or application/doc
//3. FileContent//byte[]
if (result.Data != null)
{
response.Success = result.success;
response.Data = result.Data;
return Ok(response);
}
}
.ts 文件看起来像这样
data.service.ts
getResume(methodName: string, id :string): Observable<any> {
let httpOptions = this.getAuthoriseHeader();
return this.http.get(environment.baseApiUrl + methodName + id, { headers: httpOptions, observe: 'response', responseType: 'blob' });
}
view.component.ts
this.dataservice.getResume(method, id).subscribe(result => {
var resume = result["data"];
var fileName = resume.resumeName;
var fileType = resume.resumeType;
const file = new Blob([resume.resume], { type: fileType });//Is this correct or do i need to use 'application/octet-stream' here?
saveAs(file, fileName);
});
上面的实现文件正在下载,但是当我尝试打开文件时,显示如下
我的响应对象是
更新:
我在我的 .ts 文件中试过这个
var 文件名 = resume.resumeName; var 文件类型 = resume.resumeType; //var byteArray = new Uint8Array(resume.resume);
const file = new Blob([resume.resume], { type: 'application/octet-stream' });
this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file));
let a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = this.fileUrl;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(this.fileUrl);
a.remove();
文件正在下载 失败 - 没有文件 错误
这是我下载文件的方式(Excel 在我的例子中,但我认为这没有什么不同,因为我们都使用 Blob)。我已经安装了 ngx-filesaver 并将其用作依赖项注入。
import { FileSaverService } from 'ngx-filesaver';
constructor(
private http: HttpClient,
private fileSaver: FileSaverService
) {}
export(): Observable<any> {
const body = {...};
return this.http.post(`${environment.api}/export`, body, {
responseType: 'blob',
observe: 'response',
});
}
anotherFunction() {
this.export().subscribe(({ body, headers }: HttpResponse<any>) => {
const blob = new Blob([body], { type: headers.get('content-type') });
this.fileSaverService.save(blob, 'your_file_name.xlsx');
});
}
编辑
这是console.log(body, headers)
我终于找到了解决方案并且现在工作正常。我怀疑这是将我的 blob 数据转换为保存的问题。
const binaryString = window.atob(resume.resume); // Comment this if not using base64
const bytes = new Uint8Array(binaryString.length);
return bytes.map((byte, i) => binaryString.charCodeAt(i));
然后我用了
const blob = new Blob([body]);
//rest of the code is same as posted question
这篇文章对解决问题很有帮助
https://medium.com/@riccardopolacci/download-file-in-javascript-from-bytea-6a0c5bb3bbdb