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