javascript - 使用浏览器自动下载文件并能正常打开或阅读

Question

前端将向 Scala Play Framework API 发送发布请求以下载文件。响应 header 如下:

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

我的react 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，通过创建 8 位数组 for 循环将 res.data 转换为 arraybuffer - 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)