代码之家  ›  专栏  ›  技术社区  ›  MarioC

从REST api下载文件时发生Javascript错误

  •  0
  • MarioC  · 技术社区  · 3 年前

    我有两份申请。 用spring boot制作的服务器和用Vue2制作的客户端。js。

    我需要下载一个xlsx文件。

    因此,在服务器a中,使用ApachePOI库创建文件,然后

    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);
    

    将文件发送到响应中。

    在Vue2js客户端中,当我按下导出按钮时,我使用Axios点击控制器并下载文件。

    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)
    

    回应。数据就像

    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�dž�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
    

    和其他角色 但创建的excel文件不能以错误的扩展名或格式打开。

    但是,如果我使用Postman,响应是相同的,如果我将其保存为文件,则文件是完美的,因此在我看来,服务器部分很好,但我在JS客户端中遇到了一些问题,无法真正解码和创建文件。

    0 回复  |  直到 3 年前
        1
  •  0
  •   MarioC    3 年前

    通过设置axios响应类型,我最终解决了这个问题

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