Javascript error while downloading a file from REST api

Question

I have 2 application. A server made with spring boot and a client made with Vue2.js.

I need to download a xlsx file.

So in the server a use apache poi lib to create the file and then

ByteArrayInputStream in = excel.getWorkerReport(reportMap, Month.of(month));

        InputStreamResource file = new InputStreamResource(in);
        
        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=export.xlsx")
                .contentType(MediaType.parseMediaType("application/vnd.ms-excel")).body(file);

to send the file into the response.

In the Vue2js client when i press the Export button i use Axios to hit the controller and download the file.

let response = await axios.get(url)
        console.log(response.data)
        var a = window.document.createElement('a');
        a.href = window.URL.createObjectURL(new Blob([response.data], { type: 'application/octet-stream' }));
         a.download = "export.xlsx"; //fName was the file name portion of the key what was passed in as part of the key value within params. 

        //  // Append anchor to body.
         document.body.appendChild(a)
         a.click();

        //  // Remove anchor from body
         document.body.removeChild(a)

The response.data is something like

PKN��R[Content_Types].xml�S�n�0����*6�PU�C���\{�X�%����]8�R�
q�cfgfW�d�q�ZCB|��|�*�*h㻆},^�{Va�^K<4�6�N�XQ�ǆ�9�!P��$��҆�d�c�D�j);��ѝP�g��E�M'O�ʕ����H7L�h���R���G��^�'�{��zސʮB��3�˙��h.�h�W�жF�j娄CQՠ똈���}ιL�U:D�����%އ����,�B���[�    �� ;˱� �{N��~��X�p�ykOL��kN�V��ܿBZ~����q�� �ar��{O�PKz��q;PKN��R_rels/.rels���j�0�_���8�`�Q��2�m��4[ILb��ږ���.[K
�($}��v?�I�Q.���uӂ�h���x>=��@��p�H"�~�}�   �n����*"�H�׺؁�����8�Z�^'�#��7m{��O�3���G�u�ܓ�'��y|a�����D�    ��l_EYȾ����vql3�ML�eh���*���\3�Y0���oJ׏�  :��^��}PK��z��IPKN��RdocProps/app.xmlM��
�0D�~EȽ��ADҔ���A? ��6�lB�J?ߜ���0���ͯ�)�@��׍H6���V>��$;�SC
;̢(�ra�g�l�&�e��L!y�%��49��`_���4G���F��J��Wg
�GS�b����
~�PK�|wؑ�PKN��RdocProps/core.xmlm��J�0F_�依4+RB�E�Aq�Ż��m��!�v}{ӺVP�|g��������5
)J24Ҫ�t
y8��d!
��h
6�X�mk鸴��:�q��%�   \���1:d�Z�"&�/�k��w��|��4F�D0s��I��to~\J����eQ���������1+5MS1m.mT������|>���I[��\zU�<~���w:�H�(+sz����(���깆_���l}{�
�1��]���\ß��OPK��PKN��Rxl/sharedStrings.xmle��JA��>�0OvVA����M���m�
�$�$[||�"��/ߟ��_yrG�J½�^t�!�#>�������/�ET57����[�f��W��~��~4+!�0b]HAnf/5�5����"�tD�<�����}�J)Zz��1X���?�'�KA�"�Dr���F,n+�"���ȫ(�k6���Vbp�ˍQ�?�К�oPKee�&PKN��R
xl/styles.xml���n�0��{�(���JS

and other characters But the excel file that is created cannot be opened for wrong extension or format.

But if i use Postman, the response is the same and if i save it as a file, the file is perfect, so it looks to me that the server part is good but I have some problem in the JS client to really decode and create the file.

Why do you relay it via blobs rather than just point to the url itself? — siaznik, Apr 28 '21 at 21:09
Can you share what the `Content-Type` is in the response header? I suspect, if it is not correct, axios might be interpreting it as string data instead of binary. — Daniel, Apr 28 '21 at 23:06
@Daniel this is the response header Content-Type: application/vnd.ms-excel — MarioC, Apr 29 '21 at 06:56
@besmart I didn't mean to just hit it via axis like `axios.get(url)` but rather with `a.href = url` — siaznik, Apr 29 '21 at 08:38

score 0 · Answer 1 · answered Apr 29 '21 at 07:11

0

I finally solved it setting axios response type, in this way

axios.get(url, {
            responseType: 'arraybuffer',
            headers: {
                'Accept': 'application/octet-stream'
            }
        })

answered Apr 29 '21 at 07:11

MarioC

2,934
15
59
111

Javascript error while downloading a file from REST api

1 Answers1