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});
}

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

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

对我有用的是将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'
  });
}

Answer 2

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

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

的答案中得到了这个想法

但是，如果文件很大，则必须小心，如该问题中所述。

无法使用angular 5 file-saver和dot net framework下载文件

2 个答案: