Question

前端会向Scala Play Framework API发送一个帖子请求以下载文件。响应标头如：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:8000
Content-Disposition:attachment; 
filename="logo_10248191299068944166699.png"; 
filename*=utf-8'logo_10248191299068944166699.png
Content-Length:53765
Content-Type:image/png
Date:Thu, 07 Sep 2017 13:05:57 GMT
Vary:Origin

我的反应js代码如下：

const FileDownload = require('react-file-download')
axios(req).then(response => (response.status === 200? response : 
null)).then(res =>
        {

        FileDownload(res.data, filename)

    })

可以自动下载，但无法读取文件。例如，如果我下载图像，则无法渲染图像。如果我下载一个zip文件，则无法提取。我已经尝试了React-FileDownload，FileSaver，将res.data转换为arraybuffer，创建了8位数组for循环--I.Just.Cant.Make.It.Work。

当我从ubuntu中删除扩展格式并在Atom上打开它时，会显示出来。在Chrome的下载标签中，它指出了blob:http://localhost:8000/4de5d808-67a6-4d4e-9920-24bd342664f6

�PNG


IHDRwB���gAMA���asRGB��� 
cHRMz&�����u0�`:�p��Q<bKGD�������   
pHYs.#.#x�?v�IDATx���w�e�Y����9WܹrN]]�-����0�2��,����t|
�=w�{ƹ�&����`LI��`0&I�J��j�����}��J���Pa�=W�~����ݭ��jϵ~�}��1`�|�;��֟zQj�?xz�����z�N-�^n5��$�m�:Uv��Sv�]�N��%=✾s����V��Ǜ?l����>$)��7��p�y{B]]�Ò�T��J:i�̥���+.�V5����$����u����u^�����-��%��tJ��ً�[��8��$}���UOI�{޻]v��N�3k׉�I�!�+$}�����I'���cW���_sNF�DҏI�Ip�9��$�`��

Answer 1

我解决了这个问题。它位于POST请求中。

url: url + '/storage/download_file',
method: 'POST',
responseType: 'blob',   //THE KEY TO SUCCESS
headers: {
    Authorization: 'Bearer ' + token,
            Accept: 'application/json',
            'Content-Type': 'application/json'
  }

必须添加responseType: 'blob'

我更改为FileSaver以下载文件。

var blob = new Blob([res.data], {type: "application/octet-stream"});
FileSaver.saveAs(blob, filename)

Answer 2

以上解决方案有效，但我不想安装过多的软件包

Axios

url: '/url
responseType: 'blob'

JS

const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.href = url;
link.download = fileName;
document.body.appendChild(link); // optional
link.click();
document.body.removeChild(link); // optional

使用可以打开或正确读取的浏览器自动下载文件

2 个答案: