Angular 9：csv 从后端收到的日文字符未正确下载

Question

我想要实现的目标：当用户单击下载链接时，他们会从 laravel 后端收到一个包含日文字符的 csv，该后端是动态创建的，然后自动下载到用户 PC。

问题：CSV 文件正确显示英文字符和数字，但不显示日文字符。

我试过的：

尝试 1 ：

html：

<button mat-raised-button color="primary" (click)="downloadTest()">Download</button>

<a id="download" class="hidden" [download]="csvFileName" [href]="downLoadURL"></a>

组件.ts：

url: string = "http://hojin.ctot.jp/markets/CSV/S01_USDJPY.csv"



downloadTest(): void {
    this.apiService.getCSV(this.testurl).then(data => {
      if (data) {
        this.generateCSVDownloadLink("test.csv", data).then(result => {
          const downloadElement = document.getElementById("download") as HTMLAnchorElement;
          downloadElement.click();
        });
      }
    });
  }

async generateCSVDownloadLink(filename: string, csv: any) {
    return new Promise((resolve) => {
      const csvContent = "data:text/csv;charset=utf-8,%EF%BB%BF";
      this.downLoadURL = undefined;
      this.downLoadURL = this.sanitizer.bypassSecurityTrustUrl(csvContent + encodeURIComponent(csv));

      setTimeout(() => resolve(true), 1000);
    });
  }

apiService.ts

public getCSV(url: string, params?): Promise<any> {
    const headers = new HttpHeaders({
          Accept: 'text/csv',
        });
    return this.http.get(url, {params, headers, responseType: 'text'}).toPromise().then((response: any) => {
      return Promise.resolve(response);

    }).catch(this.handleError());
  }

尝试2 ：（apiService.ts 相同，html 相同，无标签）

组件.ts

downloadTest(): void {
    this.apiService.getCSV(this.testurl).then(data => {
      if (data) {
        const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
        const blob = new Blob([bom, data], { type: 'text/csv' });
        const aTag = document.createElement("a");

        aTag.download = "test.csv";

        if (window.navigator.msSaveBlob) {
          // for IE
          window.navigator.msSaveBlob(blob, aTag.download);
        } else if (window.URL && window.URL.createObjectURL) {
          // for Firefox Chrome
          aTag.href = window.URL.createObjectURL(blob);
          document.body.appendChild(aTag);
          aTag.click();
          document.body.removeChild(aTag);
        } else {
          // fail
        }
      }
    });
  }

结果都是一样的。

Answer 1

我终于找到了解决方案：

在 http.get 中，我将 responseType 更改为responseType: 'blob'

然后我删除了以下几行

const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
const blob = new Blob([bom, data], { type: 'text/csv' });

从 downloadTest function 并按原样下载 blob。