Question

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

首先，我向后端控制器发送一个帖子呼叫：

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。没有成功。

有人解决吗？

Answer 1

原因是POST不接受responseType。因此，我需要先进行POST调用，然后再进行GET请求以检索和创建文件。

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

1 个答案: