javascript - 如何在客户端将数据导出和下载为有效的 xlsx 格式？

Question

我从后端 api 获取学生数据列表到一个有效的 excel 文件中，该文件在到达端点/api/v1.0/students/students-xlsx/时下载但是在客户端，当我调用此端点显示不可读的格式并作为损坏的 excel 文件下载。

我遵循了一些 stackoverflow 的建议，例如 atob、encodeURI 响应数据并添加特定类型 (UTF-8)，但它失败了。我仍然收到带有奇怪字符的损坏文件。

excelFileDownload() {
  this.$http.get(this.exportXLUrl)
    .then((response) => {
      response.blob().then(() => {
        const blob = new Blob([response.body], { type: response.headers.get('content-type') });
        const filename = response.headers.map['content-disposition'][0].split('filename=')[1];
        const link = document.getElementById('download-excel-file');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename.split('"').join('');
        link.style.display = 'block';
        link.click();
      });
    });
},

我希望输出与我仅使用可浏览 API 调用端点时的输出相同 - 这会为我提供具有可读字符的适当 xls 格式文件。但是在客户端，我根本没有得到。都坏了任何帮助改进我的代码将不胜感激。

Answer 1

如果你愿意使用XMLHttpRequest

(未经测试)

const xhr = new XMLHttpRequest();
xhr.open('GET', this.exportXLUrl, true);
xhr.responseType = 'blob';

xhr.addEventListener('load', () =>
{
    if(xhr.status == 200)
    {
        const url = window.URL.createObjectURL(xhr.response);

        const contentDisposition = xhr.getResponseHeader('content-disposition');
        const filename = /filename=([^;]*)/.exec(contentDisposition)[1];

        const link = document.getElementById('download-excel-file');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename.split('"').join('');
        link.style.display = 'block';
        link.click();

        //Dont forget to revoke it
        window.URL.revokeObjectURL(url);
    }
    else
    {
        //error
    }
});

xhr.addEventListener('error', err =>
{
    //error
});

xhr.send();