无法从开发/qa/生产环境中的 src/assets 下载 excel 文件以进行角度应用程序



我正在使用angular-7应用程序。我在 src/assets 中有示例 excel 文件。我已经实现了一个下载附件方法来下载示例 excel 文件。我可以下载它,但是当我打开下载的示例 excel 文件时出现错误。错误描述为:Excel 无法打开文件"sample.xlsx,因为文件格式或文件扩展名无效。验证文件是否未损坏,以及文件扩展名是否与文件格式匹配。

组件.组件.html

<button mat-raised-button (click)="downloadexcelfile()">
<button mat-raised-button (click)="download()">

component.component.ts

downloadexcelfile() {
if(navigator.msSaveBlob) {
// to support in IE 10+
let data: any;
this.HttpClient.get("./assets/sample.xlsx",{responseType: "blob"}).subscribe((res:any) => { 
data = res;
// approach - 1
let csvData = new Blob([data], { type: 'text/csv;charset=utf-8;'});
// approach - 2
let csvData = new Blob([data], { type: 'application/vnd.ms-excel'});
// approach - 3
let csvData = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
navigator.msSaveBlob(csvData, "sample.xlsx");
})
}
else if(!navigator.msSaveBlob) {
let link = document.createElement("a");
link.href = "assets/sample.xlsx";
link.download = "sample.xlsx";
link.click();
window.URL.revokeObjectURL(link.href);
link.remove();
}
}
// approach - 4
download() {
if(navigator.msSaveBlob) {
// to support in IE 10+
let data: any;
this.HttpClient.get("./assets/sample.xlsx",{responseType: "arraybuffer"}).subscribe((res:any) => { 
data = res;
// approach - 5
let csvData = new Blob([data], { type: 'text/csv'});
// approach - 6
let csvData = new Blob([data], { type: 'application/vnd.ms-excel'});
// approach - 7
let csvData = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
navigator.msSaveBlob(csvData, "sample.xlsx");
})
}
else if(!navigator.msSaveBlob) {
let link = document.createElement("a");
link.href = "assets/sample.xlsx";
link.download = "sample.xlsx";
link.click();
window.URL.revokeObjectURL(link.href);
link.remove();
}
}

我已经尝试了多种方法,并花了大约 5 天来解决这个问题。 不过,我还是想弄清楚。谁能帮我解决这个问题。提前谢谢。

this.HttpClient.get("./assets/sample.xlsx",{responseType: "blob"}).subscribe((res:any) => { 
const url= window.URL.createObjectURL(res);
window.open(url);
});

最新更新