Vue2利用创建a标签实现下载本地静态文件到本地电脑上的功能

最近PC项目遇到一个需求,那就是需要前端下载前端代码包里的前端文件到本地,并且可以给下载下来的文件名指定任意的文件名,如下图所示,在前端代码里public里的statics里有个静态文件zswj.pem,页面上有个下载按钮,用户点击下载按钮后,触发downData方法,将其下载下来:

在这里插入图片描述
在config.js里,配置了一个zswjName变量,在我们部署时修改其名称就能达到页面上下载下来的文件的文件名为我们想要的文件名了。
在这里插入图片描述
这里需要注意的地方是,a标签的href地址需要写相对地址,a标签的download需要写成变量+后缀的形式,因为我们的文件是pem格式,这里后缀固定为.pem,如下所示:

 a.href = "./statics/zswj.pem"; a.download = window.g.zswjName + ".pem";

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/274469.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

扁平数据转树形结构,让数据管理更清晰

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Python学习:基础语法

版本查看 python --version编码 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串。 特殊情况下,也可以为源码文件指定不同的编码: # -*- coding: cp-1252 -*-标识符 第一个字符必须是字母表中字母或…

sentinel prometheus指标收集及资源规则正则表达式实现

sentinel 支持 prometheus 收集指标 实现原理 在 sentinel-extension 模块下,新增 sentinel-prometheus-metric-exporter 模块。依赖Prometheus 提供的 simpleclient 和 simpleclient_httpserver 来实现 exporter。 依赖 simpleclient 主要是为了实现自定义Collect…

数学建模-模糊性综合评价模型

中医药是中国传统文化的重要组成部分,凝聚了中华民族千百年来智慧的结晶。作为中医的发源地,中国政府一直致力于保护、发展和推广中医药,采取了一系列政策措施[]。目前,中国面临着老龄化日益加剧,老年人群中慢性疾病和…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的火焰检测系统(Python+PySide6界面+训练代码)

摘要:本研究详述了一种采用深度学习技术的火焰检测系统,该系统集成了最新的YOLOv8算法,并与YOLOv7、YOLOv6、YOLOv5等早期算法进行了性能评估对比。该系统能够在各种媒介——包括图像、视频文件、实时视频流及批量文件中——准确地识别火焰目…

C语言 —— 图形打印

题目1: 思路: 如果我们要打印一个实心正方形,其实就是一个二维数组,i控制行,j控制列,行列不需要控制,arr[i][j]直接打印星号即可。 对于空心正方形,我们只需要控制行和列的条件&…

【Linux基础(三)】信号

学习分享 1、信号的基本概念2、查看信号列表3、常见信号名称4、signal库函数5、发送信号kill6、kill - signal (无参信号)示例6.1、kill - signal (不可靠信号)示例6.2、kill - signal (可靠信号)示例 7、信号分类7.1、信号运行原理分类7.2、信号是否携带…

HTML 学习笔记(十一)表单

一、分块 1.单行文本框控件–文本框和密码框 文本框控件通过单标签input实现,其具有必要属性type来控制输入控件的类型(默认为text即文本信息),密码框的type为password(口令)。   表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常…

docker——启动各种服务

1.Mysql 2.Redis 3.nginx 4.ES 注意:ES7之后环境为 -e ELASTICSEARCH_HOSTS http://ip地址:9200

【考研数学】660/880/1000/1800 使用手册

开门见山,直接介绍几个热门的习题册 660:660表面上叫基础通关660,但实际上很多题的难度并不适合基础阶段,建议在强化阶段搭配着 严选题做660,对提升做小题的速度和能力非常有帮助。 880:题量适中&#xf…

Python 导入Excel三维坐标数据 生成三维曲面地形图(面) 4-2、线条平滑曲面(原始颜色)但不去除无效点

环境和包: 环境 python:python-3.12.0-amd64包: matplotlib 3.8.2 pandas 2.1.4 openpyxl 3.1.2 scipy 1.12.0 代码: import pandas as pd import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from scipy.interpolate import griddata fro…

NTFS安全权限

NTFS是新技术文件系统(New Technology File System)的缩写,是一种用于Windows操作系统的文件系统。NTFS提供了高级的功能和性能,包括文件和目录的权限控制、加密、压缩以及日志等。它被广泛应用于Windows NT、Windows 2000、Windo…

基于Springboot的高校汉服租赁网站(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的高校汉服租赁网站(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构…

蚂蚁集团2025届暑期实习开始啦~

蚂蚁集团2025届暑期实习开始啦~欢迎大家投递信贷事业群-风险管理部的算法岗,找我内推哦~社招也有hc,欢迎大家沟通!

爬虫技术之正则提取静态页面数据

第一天 简单示例 在爬虫过程中,我们获取到了页面之后,通常需要做的就是解析数据,将数据持久化到数据库为我所用。如何又快又准确得提取有效数据?这是一门技术,看了我的博客之前可能略有难度,但各位大师看…

Python 对Excel工作表中的数据进行排序

在Excel中,排序是整理数据的一种重要方式,它可以让你更好地理解数据,并为进一步的分析和报告做好准备。本文将介绍如何使用第三方库Spire.XLS for Python通过Python来对Excel中的数据进行排序。包含以下三种排序方法示例: 按数值…

Vue 3中的provide和inject:跨组件通信的新方式

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【基于langchain + streamlit 完整的与文档对话RAG】

本地部署文档问答webdemo 支持 pdf支持 txt支持 doc/docx支持 源文档索引 你的点赞和收藏是我持续分享优质内容的动力哦~ 废话不多说直接看效果 准备 首先创建一个新环境(选择性) conda create -n chatwithdocs python3.11 conda activate chatwith…

【教程】uni-app iOS打包解决profile文件与私钥证书不匹配问题

摘要 当在uni-app中进行iOS打包时,有时会遇到profile文件与私钥证书不匹配的问题。本文将介绍如何解决这一问题,以及相关的技术细节和操作步骤。 引言 在uni-app开发过程中,iOS打包是一个常见的操作。然而,有时会出现profile文…

Android APK体积优化指南:清理项目,打造更小的APK、更快的构建速度和更好的开发体验

Android APK体积优化指南:清理项目,打造更小的APK、更快的构建速度和更好的开发体验 在任何软件项目中,开发是一个持续的过程,随着时间的推移,代码库会变得越来越复杂。这种复杂性可能导致构建时间变慢、APK体积变大&…