c# - 使用 asp.net core 2.1 在 angular 8 中下载文件总是会给出损坏的文件

Question

我在我的项目中使用asp.net core 2.1，客户端使用angular 8，但无法为downolad文件制作功能，下载时只能下载.txt文件，无法下载.pdf，.excell，image等。下面是我的代码。

downloadFiles(filename: any) {   
    return this.http.get(this.myAppUrl + 'api/Download/' + filename)
    .catch(this.errorHandler)
}

//after getting response data from server and passing to the method makeDownloadFiles only 
//downloded corrupted file.

makeDownloadFiles(data: any) {
    debugger;
    const blob = new Blob([data]); 
    const url = window.URL.createObjectURL(blob);
    window.open(url);
}

//and server code is 

[HttpGet]
[Route("api/Download/{filename}")]
public FileResult Download(string filename){
    try {
        string extension = filename.Substring(filename.IndexOf('.') + 1);
        string path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/files", filename);
        byte[] fileBytes = System.IO.File.ReadAllBytes(path);
        string fileName = filename;
        return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);
    } catch (Exception ex){
        return null;
    }
}   

Answer 1

一旦我在调用中指定类型get并且对new Blob您的代码的调用工作正常：

downloadFiles(filename: any) {   
    return this.http.get(this.myAppUrl + 'api/Download/' + filename, { responseType: 'blob'})
    .catch(this.errorHandler)
}

makeDownloadFiles(data: any) {
    debugger;
    const blob = new Blob([<any>data], {type: 'application/octet-stream'}); 
    const url = window.URL.createObjectURL(blob);
    window.open(url);
}

Answer 2

试试这个。您不需要调用 api/download 文件的 api。只需获取 FileUrl 并调用以下方法。

 downloadFile(fileNameUrl: any) {

        var filename: string[] = fileNameUrl.split('\\');
        this.getImage(fileNameUrl).subscribe((data: Blob) => {
            debugger;
            let item = filename[filename.length - 1];

            let checkFileType = item.split('.').pop();
            var fileType: any;
            if (checkFileType == "txt") {
                fileType = "text/plain";
            }
            if (checkFileType == "pdf") {
                fileType = "application/pdf";
            }
            if (checkFileType == "doc") {
                fileType = "application/vnd.ms-word";
            }
            if (checkFileType == "docx") {
                fileType = "application/vnd.ms-word";
            }
            if (checkFileType == "xls") {
                fileType = "application/vnd.ms-excel";
            }
            if (checkFileType == "xlsx") {
                fileType = "application/vnd.ms-excel";
            }
            if (checkFileType == "png") {
                fileType = "image/png";
            }
            if (checkFileType == "jpg") {
                fileType = "image/jpeg";
            }
            if (checkFileType == "jpeg") {
                fileType = "image/jpeg";
            }
            if (checkFileType == "gif") {
                fileType = "image/gif";
            }
            if (checkFileType == "csv") {
                fileType = "text/csv";
            }
            if (checkFileType == "amr") {
                fileType = "AMR-WB";
            }
            var blob = new Blob([data], { type: fileType })
            const blob1: Blob = data;
            const fileName1: string = item;
            const objectUrl: string = URL.createObjectURL(blob);
            const a: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement;

            a.href = objectUrl;
            a.download = fileName1;
            document.body.appendChild(a);
            a.click();

            document.body.removeChild(a);
            URL.revokeObjectURL(objectUrl);
        })
        }

  getImage(imageUrl: string): Observable<Blob> {
    return this._http.get(imageUrl, { responseType: 'blob' });
  }