关于前端进行文件下载

最近在做关于适用js进行文件上传下载的功能，在下载部分遇到了一些问题，特此记录下来。

首先关于文件下载在后端我能想到的可能会有但不限于的几种方式：

• api没有任何验证，访问即可下载
• api有验证：
  • 通过 header 进行验证
  • 通过 cookie 进行验证

接下来我会针对这三种方式来展示我spike得到的解决方案。

api 没有任何验证

• 可以直接通过访问该url进行下载，即：

  <a href="{download url}">download</a>

  这种方式对于 txt , jpg , pdf 等浏览器支持直接打开的文件不会被执行下载，而是会直接打开。

• 使用 download 属性（貌似是html5的新特性），会直接进行文件的下载：

  <a href="{download url}" download="{default name}">download</a>

  还有一个稍微绕一点的方法（其实是一个东西）：

  const element = document.createElement('a');
  element.href = URL.createObjectURL({download url});
  element.download = 'route.xls';
  element.click();
  

api 使用 header 进行验证

说一点题外话，这个还是花了我一些时间去搞得，因为一提到在前端进行文件下载，很多人提供的解决方案都是没有验证中的第一种。然而目前这种方式并不提供添加 header 功能，所以 html 提供的 download 新特性没法使用。

可以先将文件下载拆解成两个步骤：

1. 获取文件内容
2. 将文件进行保存

step 1 肯定是可行，只需要发送request请求，带上header就可以很好的得到文件内容。
step 2 有一个问题，如何保存文件。由于web端无法直接将文件写到用户的磁盘上，需要通过浏览器来进行。可以使用的一个方法就是上边提到过的那个稍微绕一点的方法的修改版： 将文件写到一个Blob中，然后为这个Blob创建一个新的页面，进入到这个页面，就会进行下载。

const element = document.createElement('a');
const file = new Blob([data]);
element.href = URL.createObjectURL(file);
element.download = 'route.xls';
element.click();

api 使用 cookie 进行验证

这个我还没有进行了解过。。。看到过有人说，如果食用cookie验证的话，前端的实现就同没有验证的实现是相同的。由于我并不了解，不多说。。。。

踩过的大坑

这里记录一下我踩过的大坑。我在获取文件内容的时候使用了一个第三方库，我在之前使用的时候获取到的json都是没有问题的，但是这个库在发送request的时候如果没有设置encoding，会自动将获取的内容转码，这个是事先我不知道的。所以保存下来的文件一直都是乱码。

一个教训就是，在传送像文件这种流的数据（只要不是string的数据），最好不要使用第三方库，而是使用比较原生的方法会比较好。