vue 下载本地文件

情景描述：

有时，我们需在在前端项目中下载本地某个地址的文件模块，这个文件不想放在后端去下载。所以，在这个文件大小不是太大的情况下，我们可以把文件放在前端项目目录中，这样不管开发环境还是生产环境，都能在同样的路径下找到那个文件。

 

实现：

1. 先得把文件放在项目工程目录下的某个路径下，这个路径不管是开发环境还是打包之后在生产环境，都是一样的。在vue-cli 3.x+的版本中，这个文件夹叫public:

把需要下载的文件放在public目录下，打包之后，public目录下的所有文件会直接拷贝到dist目录中。

2. 定义文件下载地址

downloadUrl: `${process.env.BASE_URL}fileResources/template.xlsx`, // 模板下载文件地址

这个地址是由process.env.BASE_URL和public下待下载文件的路劲拼一起来的，其中process.env.BASE_URL是从环境进程中根据运行环境获取的，这样才能不管在开发环境还是生产环境，都能拿到对应的下载地址。

3.点击a标签直接打开下载地址，下载文件到本地默认下载路径。

<a :href="downloadUrl" download="personnelImportTemplate.xlsx" style="color: #FF0000; text-decoration: underline">{{ $t('modal.template') }}</a>

download的值要和待下载文件名一样，包括文件后缀名。

 

===》END

欢迎交流~