Vue 之下载本地资源文件

利用 a 标签实现，这里需要注意的是：

我们这里的本地资源文件是放在 public 下的（不建议放在 assets 目录下）；
这里需要区分生产环境和开发环境，如果你的项目部署到服务器上的某个目录下（比如 test 目录下），那么你需要在给 a 标签绑定路径的时候也是需要做下区分的，开发环境直接 / 就可以，但是部署到生产环境之后一定要在你的路径前面加上你项目部署的那个目录名称（如代码所示）；

封装一个方法：

let prefixUrl = process.env.NODE_ENV === 'production' ? '/test/' : '/';
// 下载本地资源文件
// file 文件全称包含文件扩展名
// fileName下载下来的文件名称（自定义）
function downloadLocalFile(file, fileName) {let a = document.createElement('a');// 路径中'/'为根目录，即index.html所在的目录a.href = prefixUrl + 'static/downloadFile/' + file;// 下载下来的文件名a.download = fileName;// 添加点击a.click();
}

文件中调用（我这里是将公共方法在 main.js 里绑定给vue原型了）：

downLoadFile() {this.$public.downloadLocalFile('test.doc', '测试')
}

为此，将工作中常用的公共方法封装整理了一份（不定时更新）点击此处查看

如有不足，望大家多多指点！谢谢！

Vue 之下载本地资源文件相关推荐

vue前端下载本地excel文件
<a class="template-download" href="./存货周转率及存货金额目标录入模板.xlsx" download><i ...
Vue.js读取本地json文件并分页显示
Vue.js读取本地json文件并分页显示 1.功能实现通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页) 2.student. ...
PHP下载m3u8视频及解析下载ts资源文件
上一篇写了PHP生成合并ts脚本,后来又想直接下载m3u8里面的ts,又码了一段. <?php /** PHP下载m3u8视频和及解析下载ts资源文件** @file m3u8download. ...
html利用a标签实现下载本地的文件
在写html页面的时候,需要在网页上提供一个下载按钮可以下载我自己电脑中的文件.我已经知道了该文件的路径,但是之前看了很多文章都没找到正确办法,一直不知道如何能够下载本地的文件,经过不断实验发现,可以 ...
vue中使用a标签下载静态资源文件（比如excel、pdf等）后端不参与
问题描述平常我们在项目中需要做下载文件的功能,比如下载excel表格.比如下载pdf文件.比如下载word文档,这样的功能,一般是后端做,即:后端返回一个流文件.或者返回一个url地址- 但是,实际 ...
在Vue框架中通过a标签实现下载本地资源的功能
效果图: vue-cli 2.x 在vue-cli 2.x中,需要将本地资源放在static文件夹下,文件的名称可以随意,但是必须是英文.如果后续需要修改下载文件的名称,可以通过 download 这 ...
【案例】【技术难点（已解决）】vue 线上项目访问本地资源访问不到、跨域等问题的解决方法
需求在访问线上项目,从访问的电脑本地获取资源. 真正需求就是要访问本地多个视频已打包好的项目中播放并循环播放实现环境项目打包上线对于项目如何打包上线,这里笔者就不多说啦,因为会遇到这个需求的 ...
Vue导入下载的字体文件
问题描述现在我正在实现一个页面,字体是比较特殊的TecentSans W7.ttf,无法直接使用css样式中对应的font-family去使用解决方法 1.下载字体文件首先需要下载你所需要的显示 ...
java下载本地excel文件
@GetMapping("/downloadByPath") public void downloadByPath(String path, HttpServletResponse ...
获取本地json文件
方法一:vue中获取本地json文件 //通过json文件路径引入 import jsonData from './***.json' //定义一个变量用于接收数据 data() {return {c ...

Vue 之下载本地资源文件

Vue 之下载本地资源文件相关推荐

最新文章

热门文章

Vue 之 下载本地资源文件

Vue 之 下载本地资源文件相关推荐

最新文章

热门文章

Vue 之下载本地资源文件

Vue 之下载本地资源文件相关推荐