无法使用 Angular 5 文件保护程序和点网框架下载文件

Question

我目前正在尝试从我的 Angular 5 应用程序下载 Word 文档。 docx 文件位于服务器上的模板文件夹中，它从服务器打开时不会出现问题。但是当我在我的应用程序中检索它，将其发送到客户端，然后调用 saveAs 下载它时，它会下载，但文件打开时已损坏。我已经查看了一大堆其他问题，但还没有遇到涵盖这种情况的问题。我怀疑这可能是某种编码问题。

在我的控制器中，代码如下所示：

[HttpGet("[action]")]
public IActionResult GetGdwFile([FromBody] int gdwQueryJobId)
{
   var currentDirectory = Directory.GetCurrentDirectory();
   var filePath = Path.Combine(currentDirectory, @"DocumentTemplates\nab.docx");
   var fileData = System.IO.File.ReadAllBytes(filePath);
   return Ok(new Models.APIResult {Success = true, Data = fileData});
}

在 Angular 客户端代码中，我的调用如下所示：

downloadFile() {
        this.gdwService.getGdwFile(1).subscribe(response => {
            const fileBlob = new Blob([response.data], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
            saveAs(fileBlob, "Salesbypostcode.docx");
        });
    }

当我调试时，response.data 确实包含完整的二进制数据数组，正如预期的那样。

gdwservice 调用只是直接通过 http get：

getGdwFile(gdwQueryJobId: number) {

   return this.http.get(`/api/Gdw/getGdwPdfFile?gdwQueryJobId=${gdwQueryJobId}`,
        {
            headers: new HttpHeaders({
                "Content-Type": "application/json",
            })
        });
}

我需要做什么才能正确下载而不损坏文件？

Answer 1

好的，我找到了问题的答案。从服务方法返回数据时，它似乎没有正确编码。为了解决这个问题，我做了以下事情：

downloadGdwFile() {
        this.gdwService.getGdwFile(1).subscribe(response => {
            const byteCharacters = atob(response.data);
            var byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            var blob = new Blob([byteArray], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
            saveAs(blob, "Salesbypostcode.docx");
        });
    }

我是从this stack overflow issue的回答中得知的

但是，如果文件很大，你必须小心，正如那个问题中提到的那样。

Answer 2

对我有用的是将responseType: 'blob' 添加到 http 请求的选项中，然后将结果用作 blob，而不是尝试构造 blob。

所以，例如：

downloadFile() {
  this.gdwService.getGdwFile(1).subscribe(fileBlob => {
    saveAs(fileBlob, "Salesbypostcode.docx");
  });
}

getGdwFile(gdwQueryJobId: number) {
  return this.http.get(`/api/Gdw/getGdwPdfFile?gdwQueryJobId=${gdwQueryJobId}`,
      {
        headers: new HttpHeaders({
           "Content-Type": "application/json"             
      }),
      responseType: 'blob'
  });
}