首页 > 解决方案 > 使用 Axios 获取并保存 Excel 文件

问题描述

我正在使用 react 和 axios 对将返回 .xlsx 文件的 php 服务进行 POST。.xlsx 文件在服务器上正确创建,但在传输过程中它被损坏,通过 Chrome 检查器,数据似乎被转换为字符串,因此许多字符都被更改。有没有办法做到这一点?我尝试过的事情:

应要求提供标头

'Accept': 'application/octet-stream',
'responseType': 'blob',

使用响应对象

fileDownload(new Blob([response.data]), 'report.xlsx');

或者使用响应对象

const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.xlsx');
link.click();

无论我尝试什么,它似乎都被破坏了。在服务器端,我有以下 PHP 代码:

$response = new Stream();
$response->setStream(fopen($tempFilePath, 'r'));
$response->setStatusCode(200);
$response->setStreamName($tempFilePath);
$responseHeaders = new Headers();
$responseHeaders->addHeaders(array(
    'Content-Disposition' => 'attachment; filename='report.xlsx',
    'Content-Type' => 'application/octet-stream',
    'Content-Length' => filesize($tempFilePath),
    'Expires' => '@0', 
    'Cache-Control' => 'must-revalidate',
    'Pragma' => 'public'
));
$response->setHeaders($responseHeaders);
return $response;

标签: phpreactjsaxios

解决方案


尝试responseType从标题中删除并将其直接添加到您传递给 axios 的选项对象中:

axios({
    method:'GET',
    url: '[your_url_to_get_file]',      
    responseType: 'blob', 
    headers: { your headers }
})

最重要的是,我会尝试使用application/vnd.openxmlformats-officedocument.spreadsheetml.sheet作为您的内容类型,而不是octect-stream. 我从未尝试过octect-stream,但我提到的那个一直对我有用 .xlsx 文件。

有关 MIME 类型的参考,请参见此处


推荐阅读