vue+Element-ui实现模板文件下载

devtools/2024/10/22 9:32:17/

最近实现一个功能,数据过多,录入系统的时候过慢,所以新增一个导入数据的功能。
导入数据的话,为了防止用户随意输入,或者不知道怎么输入,所以特完成模板下载功能。
通常情况下实现模板下载采用a标签即可实现如下(前提是在前端工程中的public 目录下必须能找到以下路径):

<a href="/doc/XXX模板.xlsx">模板下载</a>

但是为了美观,在页面使用按钮的方式进行实现,采用的前端组件库是:Element-ui 实现方式有以下两种:
1.使用window.location.href 实现
页面添加按钮如下:

<el-button type="text" icon="el-icon-download" @click="onDownload">模版下载</el-button>

下载方法如下(前提是在前端工程中的public 目录下必须能找到以下路径):

//下载模版onDownload(){window.location.href = '/doc/xxx模板.xlsx'}

2.采用创建a标签对象的方式实现:
页面添加按钮如下:

<el-button type="text" icon="el-icon-download" @click="onDownload">模版下载</el-button>

下载方法如下(前提是在前端工程中的public 目录下必须能找到以下路径):

onDownload(){let a = document.createElement("a");a.href = "/doc/xxx模板.xlsx";a.download = "XXX模板.xlsx";a.style.display = "none";document.body.appendChild(a);a.click();a.remove();
}

http://www.ppmy.cn/devtools/6904.html

相关文章

mac jd-gui安装

在macOS上安装JD-GUI&#xff08;Java Decompiler GUI&#xff09;是一个简单的过程。JD-GUI是一个独立的图形化应用程序&#xff0c;你可以使用它来查看Java字节码对应的源代码。下面是安装步骤&#xff1a; 下载JD-GUI&#xff1a; 访问JD-GUI的官方网站&#xff08;http://j…

XiaodiSec day034 Learn Note 小迪渗透学习笔记

XiaodiSec day034 Learn Note 小迪渗透学习笔记 记录得比较凌乱&#xff0c;不尽详细 day34 黑盒审计和白盒审计 与 cms 相关 .net java php 代码审计 开始 黑盒&#xff1a;找文件上传的功能 个人用户中心是否存在文件上传功能后台管理系统是否存在文件上传功能字典目录…

深入理解人工智能:从基础到前沿/厾罗

导言&#xff1a; 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经成为了一个家喻户晓的概念。无论是在电影中看到的智能机器人&#xff0c;还是我们日常生活中的智能助手&#xff0c;人工智能的应用已经无处不在。但人工智能究竟是什么&#xff1f;它如…

【数据结构】二叉爆炸

【数据结构】二叉爆炸 按照惯例整点抽象的&#xff0c;贴上这篇博客的名字由来&#xff1a; 言归正传&#xff0c;本篇博客介绍二叉树的构造方式、前中后序遍历、层序遍历以及代码随想录中二叉树章节的相关题目&#xff1a; 代码随想录 (programmercarl.com) 一、啥是二叉树 …

节点加密技术:保障数据传输安全的新利器

随着信息技术的快速发展&#xff0c;网络数据的安全传输问题日益凸显。节点加密技术作为一种新兴的加密手段&#xff0c;正逐渐成为保障数据传输安全的重要工具。本文将探讨节点加密技术的原理、应用及其优势&#xff0c;并分析其未来的发展趋势。 节点加密技术的原理 节点加密…

开发了一个在线客服系统

开发了一个在线客服系统 作为一名程序员&#xff0c;我最近完成了一个激动人心的项目&#xff1a;一个功能全面的在线客服系统。在这个项目中&#xff0c;我使用了Golang作为后端开发语言&#xff0c;MySQL作为数据库&#xff0c;前端则是通过Vue2和ElementUI框架搭建的。 技…

探索通过GPT和云平台搭建网安实战培训环境

项目背景 网络安全是一个不断演变的领域&#xff0c;面临着日益复杂的挑战和不断扩大的威胁。数字化时代&#xff0c;随着勒索攻击、数据窃取、网络钓鱼等频频出现&#xff0c;网络攻击的威胁指数和影响范围进一步增加&#xff0c;如何防范网络攻击&#xff0c;确保数据安全&a…

软考 - 系统架构设计师 - 数据架构真题

问题 1&#xff1a; (相当于根据题目中提到的 4 点&#xff0c;说一下关系型数据库的缺点) &#xff08;1&#xff09;.用户数量的剧增导致并发负载非常高&#xff0c;往往会达到每秒上万次读写请求。关系数据库应付每秒上万次的 SQL 查询还勉强可以&#xff0c;但是应付上万…