通过 axios 下载后损坏的 XLSX 文件答案

【问题标题】：Corrupt XLSX file after download via axios通过 axios 下载后损坏的 XLSX 文件
【发布时间】：2019-09-26 09:47:41
【问题描述】：

我尝试使用 axios 在 Vue 应用程序中创建一个 XLSX 文件。我这样做：

首先我向后端控制器发送一个 post call：

return axios({
            url: '/backend/article/exportApi',
            method: 'POST',
            reponseType: 'blob',
            headers: {
                'Accept': 'vnd.ms-excel'
            },
            data: {headers: headers, articles: articles}
        });

然后在后端我做一些事情，创建一个 xlsx 文件并将其保存在服务器上。这个文件很好，当我检查它时，我可以用excel打开它。现在我希望浏览器自动下载这个文件，所以在我的控制器中我这样做（$file 是服务器上创建的 xlsx 文件的路径）：

$response = $this->Response();
$response->setHeader('Cache-Control', 'public');
$response->setHeader('Content-Description', 'File Transfer');
$response->setHeader('Content-disposition', 'attachment; filename="export.xlsx"');
$response->setHeader('Content-Type', 'application/vnd.ms-excel');
$response->setHeader('Content-Transfer-Encoding', 'binary');
$response->setHeader('Content-Length', filesize($file));
$response->sendHeaders();

echo readfile($file);

响应看起来像这样：https://d.pr/i/UndMRn 在 JS 方面，我使用响应执行此操作：

let blob = new Blob([response.data], {type: 'vnd.ms-excel;charset=utf-8'});
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'export.xlsx';
link.click();

下载的文件已损坏，无法用 Excel 打开。我尝试了几件事，包括将类型从vnd.ms-excel 更改为application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 和responseType 从blob 更改为arraybuffer。没有成功。

有人有解决办法吗？

【问题讨论】：

标签： javascript excel

【解决方案1】：

原因是 POST 不接受 responseType。所以我需要先发出一个 POST 调用，然后再发出一个 GET 请求来检索和创建文件。

【讨论】：