vue 下载本地文件

您所在的位置:网站首页 前端下载本地文件怎么下载到桌面 vue 下载本地文件

vue 下载本地文件

2023-10-19 01:32| 来源: 网络整理| 查看: 265

情景描述:

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

 

实现:

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标签直接打开下载地址,下载文件到本地默认下载路径。

{{ $t('modal.template') }}

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

 

===》END

欢迎交流~



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3