当前位置: 首页 > news >正文

Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作

第一步,public文件夹下新建static文件夹存放静态资源

我存放了一个 .docx文件,当然,你可以存放pdf/word 等文件都可以。

第二步,模拟a标签下载

//html部分<el-button type="primary" plain @click="download">本地下载</el-button>//js部分// 授权书下载
download() {// 通过a标签来实现下载var a = document.createElement("a") //创建一个<a></a>标签a.href = "/static/签约授权书.docx" //给a标签的href属性值加上地址,注意,这里是绝对路径,不用    加 点.a.download = "签约授权书.docx" //设置下载文件文件名,这里加上.docx指定文件类型,pdf文件就指定.pdf即可a.style.display = "none" //隐藏a标签document.body.append("a") //将a标签追加到document.body中a.click() //模拟点击a标签,会触发a标签的href的读取,浏览器就会自动下载了a.remove() // 删除a标签(一次性的)
}

相关文章:

Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作

第一步&#xff0c;public文件夹下新建static文件夹存放静态资源 我存放了一个 .docx文件&#xff0c;当然&#xff0c;你可以存放pdf/word 等文件都可以。 第二步&#xff0c;模拟a标签下载 //html部分<el-button type"primary" plain click"download&quo…...

ensp 基于EASY IP的公司出口链路配置

Easy IP Easy IP技术是NAPT的一种简化情况。Easy IP无须建立公网IP地址资源池&#xff0c;因为Easy IP只会用到一个公网IP地址&#xff0c;该IP地址就是路由器R连接公网的出口IP地址。Easy IP也会建立并维护一张动态地址及端口映射表&#xff0c;并且Easy IP会将这张表中的公网…...

方正畅享全媒体采编系统reportCenter.do接口SQL注入漏洞复现 [附POC]

文章目录 方正畅享全媒体采编系统reportCenter.do接口SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现方正畅享全媒体采编系统reportCenter.do接口SQL注入漏洞复现 [附POC] 0x01 前言 免责声明:请勿利…...

零知识证明:区块链隐私保护的变革力量

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…...

解决:el-select可输入时失焦会失去输入框中值

1、展示部分 <template><el-select v-model"addForm.companyName" filterable placeholder"请输入/选择公司名称" :loading"loading":filter-method"(value) > dataFilter(value)" change"selectCompany">&…...

ollama-webui - Ollama的ChatGPT 风格的 Web 界面

更多AI开源软件&#xff1a; 发现分享好用的AI工具、AI开源软件、AI模型、AI变现 - &#xff1a;发现分享好用的AI工具、AI开源软件、AI模型。收录了AI搜索引擎&#xff0c;AI绘画工具、AI对话聊天、AI音频工具、AI图片工具、AI视频工具、AI内容检测、AI法律助手、AI高考、AI志…...

「下载」智慧产业园区-数字孪生建设解决方案:重构产业全景图,打造虚实结合的园区数字化底座

数字孪生技术作为一种创新的管理工具&#xff0c;正逐步展现出其在智慧园区建设中的重要意义。以下将从几个方面详细阐述数字孪生在智慧园区建设中的关键作用。 一、提升园区运营管理的智能化水平 数字孪生技术通过构建园区的虚拟镜像&#xff0c;实现了对园区物理世界的全面…...

使用Grafana中按钮插件实现收发HTTP请求

最近项目中需要监控分布式集群的各项指标信息&#xff0c;需要用到PrometheusGrafana的技术栈实现对分布式集群的各个节点状态进行可视化显示&#xff0c;但是要求前端需要提供一个易用的接口让用户可以触发一些操作&#xff0c;例如负载高时进行负载均衡或弹性伸缩。网上找到的…...

【附源码】Electron Windows桌面壁纸开发中的 CommonJS 和 ES Module 引入问题以及 Webpack 如何处理这种兼容

背景 在尝试让 ChatGPT 自动开发一个桌面壁纸更改的功能时&#xff0c;发现引入了一个 wallpaper 库&#xff0c;这个库的入口文件是 index.js&#xff0c;但是 package.json 文件下的 type:"module"&#xff0c;这样造成了无论你使用 import from 还是 require&…...

Elasticsearch介绍及安装部署

Elasticsearch介绍 Elasticsearch 是一个分布式搜索引擎&#xff0c;底层基于 Lucene 实现。Elasticsearch 屏蔽了 Lucene 的底层细节&#xff0c;提供了分布式特性&#xff0c;同时对外提供了 Restful API。Elasticsearch 以其易用性迅速赢得了许多用户&#xff0c;被用在网站…...

物理层知识要点

文章目录 物理层接口的四大特性通信基础编码和调制&#xff08;1&#xff09;数字数据编码为数字信号&#xff08;2&#xff09;模拟数据编码为数字信号&#xff08;3&#xff09;常见调制方式&#xff08;3&#xff09;信道的极限容量 多路复用技术数据传输方式物理层下的传输…...

SpringBoot 自动装配原理及源码解析

目录 一、引言 二、什么是 Spring Boot 的自动装配 三、自动装配的核心注解解析 3.1 SpringBootApplication 注解 &#xff08;1&#xff09;SpringBootConfiguration&#xff1a; &#xff08;2&#xff09;EnableAutoConfiguration&#xff1a; &#xff08;3&#xf…...

Craft CMS 模板注入导致 Rce漏洞复现(CVE-2024-56145)(附脚本)

0x01 产品描述: ‌Craft CMS‌ 是一个灵活且强大的内容管理系统(CMS),专为创意团队和开发人员设计,提供高度可定制、直观且性能优越的网站和内容管理解决方案。它以用户友好的界面、强大的插件生态系统以及支持现代web开发最佳实践的特性而闻名‌0x02 漏洞描述: 由于模板…...

Next.js 新手容易犯的错误 _ 加载与缓存管理的关键(5)

1 错误地处理搜索参数&#xff08;Search Params&#xff09; 问题是什么&#xff1f; 在 Next.js 中&#xff0c;搜索参数指的是 URL 中用 ?keyvalue 表示的部分&#xff0c;比如 https://example.com/products?colorred 中的 colorred。这通常用于过滤、排序或选择某些选…...

/etc/fstab 文件学习systemd与该文件关系

文章目录 一、文件字段1.1、设备标识1.2、挂载点1.3、文件系统类型1.4、挂载选项1.5、dump1.5、fsck顺序 二、/etc/fstab 与systemd 的关系2.1、/etc/fstab 与systemd 的关系2.2、systemd 之前/etc/fstab生效过程2.3、systemd 时代/etc/fstab生效过程 三、相关知识3.1、如何更具…...

从源码分析swift GCD_DispatchGroup

前言&#xff1a; 最近在写需求的时候用到了DispatchGroup&#xff0c;一直没有深入去学习&#xff0c;既然遇到了那么就总结下吧。。。。 基本介绍&#xff1a; 任务组&#xff08;DispatchGroup&#xff09; DispatchGroup 可以将多个任务组合在一起并且监听它们的完成状态。…...

25计软新增考研院校!或可捡漏上岸!

C哥专业提供——计软考研院校选择分析专业课备考指南规划 新增的计算机与软件工程考研院校为考研同学带来了多方面的机遇&#xff0c;这些机遇不仅体现在过国家线后可能面临的更低竞争压力&#xff0c;还包括更多元化的教育选择和更广阔的就业前景&#xff1a; 一、降低竞争压…...

C# 线程安全集合

文章目录 引言一、ConcurrentBag<T>二、ConcurrentQueue<T>三、ConcurrentStack<T>四、ConcurrentDictionary<TKey, TValue>五、总结引言 在多线程编程环境中,多个线程可能同时访问和操作集合数据。如果使用普通集合,很容易引发数据不一致、错误结果…...

箱包发霉怎么处理 箱包发霉处理修复方法

箱包发霉怎么处理&#xff1f;箱包不仅是我们出行的必需品&#xff0c;更是承载着个人风格与品味的时尚配饰。然而箱包工厂生产的箱包&#xff0c;在潮湿多变的环境中&#xff0c;箱包很容易成为霉菌滋生的温床&#xff0c;尤其是那些长时间储存的箱包&#xff0c;更是霉菌的“…...

【每日学点鸿蒙知识】Charles抓包、lock文件处理、WebView组件、NFC相关、CallMethod失败等

1、HarmonyOS系统中如何使用Charles抓包&#xff1f; 在HarmonyOS操作系统中&#xff0c;使用Charles进行抓包的步骤如下&#xff1a; 在Charles中设置代理。 首先&#xff0c;在Charles的菜单栏上选择“Proxy”→“Proxy Settings”&#xff0c;然后填入代理端口&#xff0…...

从MySQL转战MongoDB:一个后端开发者的避坑指南与核心概念对照手册

从MySQL转战MongoDB&#xff1a;一个后端开发者的避坑指南与核心概念对照手册 当你习惯了用SQL语句精确操控数据表&#xff0c;突然面对一个没有固定结构的文档数据库&#xff0c;那种感觉就像从规整的方格本跳进了涂鸦墙——自由&#xff0c;但也容易迷失方向。作为过来人&…...

js内建对象

JavaScript 对象 在 JavaScript中&#xff0c;几乎所有的事物都是对象、在 JavaScript 中&#xff0c;对象是非常重要的&#xff0c;当你理解了对象&#xff0c;就可以了解 JavaScript 。 一维数组&#xff1a; 第一种&#xff1a;使用new关键字和Array()构造函数 a、 va…...

Phi-3-mini-128k-instruct对比测试:与主流轻量模型性能横评

Phi-3-mini-128k-instruct对比测试&#xff1a;与主流轻量模型性能横评 最近轻量级大模型的热度一直没降下来&#xff0c;各家都在推出自己的“小钢炮”。微软前段时间发布的Phi-3-mini系列&#xff0c;尤其是那个128k超长上下文版本&#xff0c;吸引了不少眼球。参数不大&…...

Unpaywall:三步解锁学术付费墙,让论文自由获取触手可及

Unpaywall&#xff1a;三步解锁学术付费墙&#xff0c;让论文自由获取触手可及 【免费下载链接】unpaywall-extension Firefox/Chrome extension that gives you a link to a free PDF when you view scholarly articles 项目地址: https://gitcode.com/gh_mirrors/un/unpayw…...

保姆级教程:手把手教你用PyTorch复现ICASSP 2023的EMA注意力模块(附完整代码)

从零实现ICASSP 2023多尺度注意力&#xff1a;EMA模块的工程实践指南 在计算机视觉领域&#xff0c;注意力机制已经成为提升模型性能的关键组件。ICASSP 2023提出的EMA&#xff08;Efficient Multi-Scale Attention&#xff09;模块通过创新的跨空间学习方式&#xff0c;在保持…...

MiniCPM-o-4.5-nvidia-FlagOS精彩案例:复杂流程图→步骤说明+优化建议生成全过程

MiniCPM-o-4.5-nvidia-FlagOS精彩案例&#xff1a;复杂流程图→步骤说明优化建议生成全过程 你有没有遇到过这种情况&#xff1f;拿到一张复杂的业务流程图&#xff0c;密密麻麻的方框和箭头&#xff0c;看得人眼花缭乱。你需要把它整理成清晰的步骤说明&#xff0c;还要给出优…...

3步完整指南:使用OpenCore Legacy Patcher让老旧Mac焕发新生

3步完整指南&#xff1a;使用OpenCore Legacy Patcher让老旧Mac焕发新生 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否有一台被苹果官方抛弃的老款Ma…...

Dify 1.11.0升级后,我的企业知识库终于能看懂PPT截图了:多模态RAG实战踩坑记录

Dify 1.11.0升级实战&#xff1a;构建企业级多模态知识库的完整指南 当企业知识库开始"看懂"PPT截图和PDF图表时&#xff0c;RAG技术才真正触及生产力变革的核心。Dify 1.11.0的多模态升级&#xff0c;让我们终于能将堆积如山的培训PPT、产品手册和系统截图转化为可检…...

Qwen3-0.6B-FP8实战教程:支持中文长上下文的本地化对话微调准备

Qwen3-0.6B-FP8实战教程&#xff1a;支持中文长上下文的本地化对话微调准备 想在自己的电脑上跑一个能聊天的AI&#xff0c;但又担心显卡太差、内存不够&#xff1f;今天给大家介绍一个神器——基于Qwen3-0.6B-FP8模型的本地对话工具。它只有6亿参数&#xff0c;经过FP8量化后…...

5个必装开源应用:彻底改变你的macOS工作流

5个必装开源应用&#xff1a;彻底改变你的macOS工作流 【免费下载链接】open-source-mac-os-apps &#x1f680; Awesome list of open source applications for macOS. https://t.me/s/opensourcemacosapps 项目地址: https://gitcode.com/gh_mirrors/op/open-source-mac-os…...