vue独立提供模板下载功能

需求描述：页面需要下载模板文件（word、excel），这些文件是固定的，如果存储在服务端，由后端负责返回数据流，前端再处理数据流则太浪费性能。把文件放到前端，用户下载时直接提供。但是传统的前端项目(html/css/js)是无法做到获取文件。

1.将这部分静态的文件放入到public目录

可以参考命名一个static的文件夹，将所有静态资源放入到该文件夹中

放入public的文件最终会直接打包到前端服务器

当然，还有另外一种方法。静态资源文件可以放置在src目录下的static文件夹，然后通过copy-webpack-plugin，在webpack的配置文件中为static文件夹配置复制处理的操作，在此不做演示，有兴趣可以自己试试。

直接复制到public比较粗暴，比较直接

2.验证

打包后的文件，已经可以通过服务器访问到这个资源。运行项目，通过localhost:8080访问项目正常，在8080后面接我们的文件路径即可获得一个下载链接，如：localhost:8080/static/files/userTemplate.xls

打开这里链接即可自动下载

3.编写代码

用户如何触发下载？点击下载时通过window对象获取当前网页的域名（ip）端口号等，触发下载事件

 loadDownImportExcel(){let xieyi = window.location.href.split("://")[0];let host = window.location.host;let pathname = window.location.pathnamelet baseUrl = xieyi + '://' + host + pathnameconst link = document.createElement('a')link.style.display = 'none'link.setAttribute('href', baseUrl + '/static/files/userTemplate.xls')link.download = '用户导入模板' + new Date().getTime() //下载的文件名document.body.appendChild(link)link.click()document.body.removeChild(link)
},

vue独立提供模板下载功能相关推荐

Vue前后端页面下载功能实现演示，Python+flask提供后台下载服务
Vue前后端页面下载功能实现效果图后台下载服务实现前台简单实现 [ 文章推荐 ] Python 地图篇 - 使用 pyecharts 绘制世界地图.中国地图.省级地图.市级地图实例详解效果图 ...
Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器过滤器,就是vue允许开发者 ...
ruoyi中生成的代码表单,如果添加上传功能-模板下载功能
研究了一天了,用网上别人的代码总是出错,这个时候就要看看ruoyi作者的代码,找到并利用起来.参考此文章 https://blog.csdn.net/weixin_46945684/article/d ...
vue使用Element的xlsx模板下载功能
<el-buttonsize="mini"type="success"icon="el-icon-download"@click=&q ...
vue实现表格的‘模板下载‘功能
样式: 实现点击'模板下载'按钮,下载下方表格模板 css代码: <el-button type="text" class="marginL5" @cli ...
前端本地静态模板下载功能
第一步: 将模板文件放到public文件的static文件夹下第二步: 点击下载按钮后执行downloadTemplate方法 <template> ... <el-button ...
一个抓取网站图片并提供批量下载功能的Chrome扩展
名称:Image Assistant Batch Image Downloader: 假设我想将这个wiki网页里的图片自动下载到本地: 点击IA标签,即Image Assistant之意.选择Ext ...
VUE+JAVA实现EXCEL模板下载
一.项目场景: VUE+JAVA实现EXCEL模板下载二.功能背景本人作为一个开发小白,今天接到一个小需求系统需要导入数据,也就十几个字段,我和老板说了,让客户一个一个去输入吧!然后我就被经理叫去 ...
vue中实现附件下载
最近自己写网站练手遇到,一个难题,就是如何在前端界面中点击实现附件的下载,试了网上的很多方法,都报错(可能是我太菜了,没有理解那些大佬的意思),然后自己琢磨了好久,发现a标签的download属性可以 ...

vue独立提供模板下载功能

1.将这部分静态的文件放入到public目录

2.验证

vue独立提供模板下载功能相关推荐

最新文章

热门文章