项目需求，下载一个Excel文件，我把文件放在了代码里，加个按钮点击就可下载，因为就一个很小的文件，没必要让后端做，目前最简单的方法就是用a 标签

<a href="文件地址xxx.xlsx" download="文件名.xlsx">

加 download 属性是因为有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”;

最最关键的地方来了：文件放的位置和文件的地址这两是最大的坑。

一、文件放的位置：

我们在写vue的时候，代码都在 src 文件夹里面，但是要下载的文件不能放在这里面，要放在同级的静态文件夹下，如 public 文件夹

别人的文章里写的是 static 文件夹，但是我的没生效，不知道什么原因。

二、文件地址的引用：

需要下载的路径是相对于index.html文件路径 否则会提示下载文件未找到。

上面这句话里：路径是相对于 index.html 的文件路径，一开始没搞懂，写的路径都是我的代码的相对路径，如：../../../public/xxx.xlsx。 后来才发现这不是相对于 index.html 的路径，

这是我的代码，这才发现文件和 index.html 同级，所以引用路径直接就是：

href="./用户信息模板.xlsx"

这两个坑过去了，可以正常下载文件了。

至于文件路径和 download 的文件名存在中文会出错我这里没问题，不知道你们的会不会，这也是需要考虑的问题。

作者：Front_end_er
链接：https://juejin.cn/post/6857730119583629325
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。