React download file 中遇到的问题。

2019-02-02  本文已影响0人  拾_c356

需求:

    在页面中点击一个下载按钮,把server中的文件下载到本地。

实现中遇到的问题:

    1. 后端代码中,文件名中文乱码的问题:

        一开始在对文件名没有做任何处理的时候下载的文件名称如下图1:

图1

        随后在网上查找处理的办法,基本上都是设置文件名为UTF-8格式,然后再用ISO-8859-1进行编码。但是我在使用这种方式之后,下载的文件名变成了图下图2所示:

图2

        在不使用ISO-8859-1编码时,下载的文件名如图3:

图3

        由图3可见,字符被转成了UTF-8的形式,只要在前端将文件名decode就可以了。

    2.前端无法获取Response headers 中 Content-Disposition 的问题。

        这个问题需要后端来配合实现,在Response的header中设置Access-Control-expose-Headers即可。

    3.前端如何点击按钮下载文件。

        在按钮的点击事件中,创建一个a标签,用来模拟a标签点击时下载文件的方法。

图4

结果:

        下载文件成功,并且文件名称没有乱码。

图5

        前端代码:

图6 图7

后端代码如下:

controller service
上一篇下一篇

猜你喜欢

热点阅读