如何在客户端将数据导出和下载为有效的 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();

Answer 2

我需要通过 get 请求在 headers 和 responseType 中传递 Content-type，如下所示：

headers: { 'Content-Type': 'application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet' },
responseType: 'arraybuffer'

现在可以正常使用了。