【仰取俯拾】js文件下载重命名

在项目开发过程中，可能会遇到页面展示的文件名与实际下载的文件的文件名不一致的情况，此时对文件进行重命名变得很有必要，如下图示例：

之所以造成这种情况，是因为：后端将前端上传的文件的信息保存到数据表中（包括原有的文件名信息），前端展示时使用的文件名就是接口返回的文件名，但是在服务器上保存的文件的名字却发生了变化，没有将前端上传的文件名保存为服务器实际存在的文件的文件名。

由下图可以清楚的知道下载后的名字即为该文件在服务器上的名字，显然与原本上传时的文件名不一致，由此可知，要使得下载后的文件名与上传时一致，要么后端使得服务器上的文件名字与上传文件名字一致（重名加后缀区分），要么前端下载时使用接口返回的原文件名重命名该文件

下面是前端通过js给文件重命名的方法：

1.获取文件流blob（原生方法与项目中封装后方法）

2.重命名文件

3.方法调用

通过js重命名文件在PC与iOS系统上是可以实现的，但在Android系统上会出现无法重命名并下载失败的情况，排查原因为：Android系统不支持文件流下载，故通过调取接口下载文件流并重命名方法会出问题，Android系统下载文件要直接访问文件的服务器地址，即下图所示：

有趣的是，虽然微信内嵌浏览器不支持下载，但iOS却可以通过访问文件的服务器地址来通过微信内嵌浏览器直接预览如pdf、ppt、word、excel等格式文件而不需先下载再利用其他应用打开，而Android系统只支持图片与常见音视频格式与h5等文件的预览，其它需利用插件或下载后才能查看

故为了兼容Android系统，只能由后端改变服务器上存储的文件名

4.实现效果

以上内容如存在纰漏或更优解，望不吝赐教~