Télécharger le fichier automatiquement avec le navigateur qui peut être ouvert ou lu correctement

Frontend enverra une demande de publication à l'API Scala Play Framework pour télécharger un fichier. L'en-tête de réponse est comme:Télécharger le fichier automatiquement avec le navigateur qui peut être ouvert ou lu correctement

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

Mon code de js est réagir comme ci-dessous:

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

     FileDownload(res.data, filename) 

    })

Il peut être téléchargé automatiquement, mais le fichier ne peut être lu. Par exemple, si je télécharge une image, l'image ne peut pas être rendue. Si je télécharge un fichier zip, il ne peut pas être extrait. J'ai déjà essayé React-FileDownload, FileSaver, convertir la res.data en arraybuffer avec la création de 8 bits pour la boucle - I.Just.Cant.Make.It.Work.

Lorsque j'efface le format de l'extension d'ubuntu et l'ouvre sur Atom, cela apparaît. Et à partir de l'onglet de téléchargement dans Chrome, il a déclaré 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��$�`��

Source

2017-09-07 Mervyn Lee

La recherche de tous les problèmes connexes trouvés dans stackoverflow, personne ne peut réellement le résoudre. J'imagine que c'est une tâche impossible de télécharger le fichier avec React .... Réagir n'est probablement pas encore très bon = ( –

Qu'est-ce que 'filename = utf-8'logo_10248191299068944166699.png'? Pourquoi avez-vous besoin d'un jeu de caractères pour une image? – lumio

J'ai résolu le problème. Il se trouve dans la requête 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' 
    }

devez ajouter responseType: 'blob'

j'ai changé pour FileSaver pour télécharger le fichier.

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

Source

2017-09-07 16:02:14

Télécharger le fichier automatiquement avec le navigateur qui peut être ouvert ou lu correctement

Répondre

Questions connexes