React download file 中遇到的问题。

需求:

    在页面中点击一个下载按钮,把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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容