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

HTML JS实现点击按钮下载文件功能例子（C知道版）

news 2025/9/14 21:27:40

        其实这篇应该算是一篇“水”文章，为什么要这么“水”呢，除了最近南方的气候闷热难耐需要降温之外，另一个主要原因，这里面所写的代码均是由CSDN的AI文本大模型"C知道"完成，我在这里只是简单记录一下，也方便其他有需求的同学借鉴一下，少绕一些弯路（有些弯路还是需要自己绕的）。CSDN的AI文本大模型也是前几个月才推出的，体验过几次，效果不错，对于各种技术问题的回答还是比较让人满意的，不管是在学习上还是工作过程中都能帮到我们不少，表示感谢！

        作者是搞C出身的，对于前端的内容也只是项目上有需求了才会上网突击补补课，有时对于一个可能比较简单普及的问题，百度了很多也是没有合适满意的答案参考，有些文章博客对于这些简单普及的问题也是设置了各种浏览限制，要不加入会员要不开通VIP要不关注博主要不充钱，十分不便，这时一款好用的AI可谓帮我们做到了“万事不求人”，下面内容即是一个例子，最后一点还是需要注意：酒虽好喝，莫要贪杯。

实现一个点击按钮下载文件的例子

<!DOCTYPE html>
<html>
<head><title>文件下载示例</title>
</head>
<body><button onclick="downloadFile()">点击下载文件</button><script>function downloadFile() {// 创建一个虚拟的链接元素var downloadLink = document.createElement('a');downloadLink.href = 'path/to/your/file';  // 替换为你要下载的文件路径// 设置下载文件的名称downloadLink.download = 'filename.ext';  // 替换为你要下载的文件名称（包括扩展名）// 触发点击事件进行下载downloadLink.click();}</script>
</body>
</html>

在上述基础上实现一个点击按钮下载固定后缀文件的功能

<!DOCTYPE html>
<html>
<head><title>文件下载示例</title>
</head>
<body><button onclick="downloadFile()">点击下载文件</button><script>function downloadFile() {var fileUrl = 'path/to/your/file';  // 替换为你要下载的文件路径var fileName = 'filename.ext';  // 替换为你要下载的文件名称（包括扩展名）// 获取文件的后缀名var fileExtension = fileName.split('.').pop();// 判断文件后缀名是否符合条件（这里以 .dat 和 .txt 为例）if (fileExtension === 'dat' || fileExtension === 'txt') {// 创建一个虚拟的链接元素var downloadLink = document.createElement('a');downloadLink.href = fileUrl;downloadLink.download = fileName;downloadLink.click();} else {alert('只能下载 .dat 或者 .txt 文件');}}</script>
</body>
</html>

在上述基础上实现点击按钮下载多个文件的例子

<!DOCTYPE html>
<html>
<head><title>下载多个文件示例</title>
</head>
<body><h1>点击按钮同时下载多个文件</h1><button onclick="downloadFiles()">点击下载文件</button><script>function downloadFiles() {// 定义要下载的文件URL和名称var files = [{ url: 'path/to/file1.ext', name: 'filename1.ext' },{ url: 'path/to/file2.ext', name: 'filename2.ext' },// 添加更多文件...];// 创建一个隐藏的<a>元素并添加到页面中var link = document.createElement('a');link.style.display = 'none';document.body.appendChild(link);// 循环遍历文件数组，并依次下载文件for (var i = 0; i < files.length; i++) {var file = files[i];// 设置文件的URL和名称link.href = file.url;link.download = file.name;// 模拟用户点击下载链接link.click();}// 清理临时元素document.body.removeChild(link);}</script>
</body>
</html>

有点需要注意的是，如果你是将WEB SERVER搭建在嵌入式Linux下，比如我前面的文章提到的在嵌入式Linux环境下移植boa web server，在设置下载文件的路径时需要先修改嵌入式环境下的boa.conf对应的路径，

比如我的boa.conf对应的内容为：

Alias /doc /mnt3/ga_syslog
Alias /ocr /mnt3/ga01_zynq_log

可以添加多行Alias,类似于一个typedef,在html里面写路径时就可以为'doc/xxx.log'、'ocr/xxx.log'等等，重新开机后再检测，否则下载不了文件。

在上述基础上实现点击按钮在文件浏览窗口中选择文件下载的例子

<!DOCTYPE html>
<html>
<head><title>选择文件下载示例</title>
</head>
<body><button onclick="selectAndDownloadFile()">点击选择文件并下载</button><script>function selectAndDownloadFile() {// 创建一个虚拟的 input 元素var fileInput = document.createElement('input');fileInput.type = 'file';// 监听文件选择事件fileInput.onchange = function(event) {var selectedFile = event.target.files[0];// 创建一个虚拟的链接元素var downloadLink = document.createElement('a');downloadLink.href = URL.createObjectURL(selectedFile);downloadLink.download = selectedFile.name;// 触发点击事件进行下载downloadLink.click();// 清除临时的 URL 对象URL.revokeObjectURL(downloadLink.href);};// 触发点击事件选择文件fileInput.click();}</script>
</body>
</html>

在上述基础上，实现在文件窗口只能显示固定后缀文件并选择下载的例子

<!DOCTYPE html>
<html>
<head><title>选择指定后缀文件下载示例</title>
</head>
<body><button onclick="selectAndDownloadFile()">点击选择 .pdf 文件并下载</button><script>function selectAndDownloadFile() {// 创建一个虚拟的 input 元素var fileInput = document.createElement('input');fileInput.type = 'file';fileInput.accept = '.pdf';  // 只接受 .pdf 文件，如多种后缀，可以以逗号分隔，如'.pdf,.dat'// 监听文件选择事件fileInput.onchange = function(event) {var selectedFile = event.target.files[0];// 创建一个虚拟的链接元素var downloadLink = document.createElement('a');downloadLink.href = URL.createObjectURL(selectedFile);downloadLink.download = selectedFile.name;// 触发点击事件进行下载downloadLink.click();// 清除临时的 URL 对象URL.revokeObjectURL(downloadLink.href);};// 触发点击事件选择文件fileInput.click();}</script>
</body>
</html>

相关文章：

HTML JS实现点击按钮下载文件功能例子（C知道版）

其实这篇应该算是一篇“水”文章&#xff0c;为什么要这么“水”呢&#xff0c;除了最近南方的气候闷热难耐需要降温之外&#xff0c;另一个主要原因&#xff0c;这里面所写的代码均是由CSDN的AI文本大模型"C知道"完成&#xff0c;我在这里只是简单记录一下&#xff…...

编程日记 2023/7/28 1:18:30

企业网络安全与数据保护合规建设 ——从合规运营到香港上市

序言 《企业网络安全与数据保护合规建设 ——从合规运营到香港上市&#xff08;一&#xff09;》梳理了我国网络安全与数据保护领域近期主要立法情况&#xff0c;本文将着重分析拟赴港上市企业运营阶段的数据合规要点以期为拟赴港上市的相关企业提供有益的参考。 二 企业运营…...

编程日记 2023/7/28 1:17:30

antdv Select dropdownRender Input 不能输入的问题

简言之&#xff1a;外层套div&#xff0c;然后利用Select的open属性。直接上代码&#xff1a; <template><a-form-item-rest><div click"selOpen !selOpen"><Selectv-model:value"xxx"placeholder"请选择":options"g…...

编程日记 2023/7/28 1:16:28

PostgreSQL 查询json/jsonb是否存在某个片段

文章目录 前言实现实现思路坑1坑2坑3 恍然大悟 前言 在PostgreSQL中&#xff0c;jsonb有额外的操作符&#xff0c;如 >、<、?、?|、?& 可以用来查询是否包含路径/值&#xff0c;以及顶层键值是否存在。 详细文章&#xff1a;PostgreSQL 操作json/jsonb 那么&am…...

编程日记 2023/7/28 1:15:27

Spring 官方文档及相关资料的网址集合

文章目录 MavenSpringSpring FrameworkSpring BootSpring Cloud AlibabaNacos Maven Maven 仓库依赖包官方查询通道&#xff1a;https://mvnrepository.com/ Maven 插件官方文档&#xff1a;https://maven.apache.org/plugins/ 安卓依赖包官方查询通道*&#xff1a;https://m…...

编程日记 2023/7/28 1:14:26

hypery 十一、命令行

教程&#xff1a;Hyperf symfony/console composer地址&#xff1a; symfony/console - Packagist github地址&#xff1a;GitHub - symfony/console: Eases the creation of beautiful and testable command line interfaces hyperf/command github地址:https://github.com/…...

编程日记 2023/7/28 1:13:25

QT占位符 %n+arg()、QString的格式化arg（补零/进制转换）

一、 1、QMessageBox::warning(this, tr("查找"), tr("找不到%1").arg(str)); 其中 %1为占位符&#xff0c;QMessageBox显示时&#xff0c;arg中的变量值会替代 %1占位符&#xff0c;达到在QMessageBox弹出框中输出变量的目的。 2、const QString entry…...

编程日记 2023/7/28 1:12:23

浙江大学第六周数据结构之06-图1 列出连通集

题目详情&#xff1a; 给定一个有N个顶点和E条边的无向图&#xff0c;请用DFS和BFS分别列出其所有的连通集。假设顶点从0到N−1编号。进行搜索时&#xff0c;假设我们总是从编号最小的顶点出发&#xff0c;按编号递增的顺序访问邻接点。 输入格式: 输入第1行给出2个整数N(0&…...

编程日记 2023/7/28 1:11:20

DNS缓存病毒防护43.227.220

DNS缓存病毒又称DNS欺骗&#xff0c;是一种通过查找并利用DNS系统中存在的漏洞&#xff0c;将流量从合法服务器引导至虚假服务器上的攻击方式。 在实际的DNS解析过程中&#xff0c;用户请求某个网站&#xff0c;浏览器首先会查找本机中的DNS缓存&#xff0c;如果DNS缓存中记录…...

编程日记 2023/7/28 1:10:19

Spring MVC -- 返回数据(静态页面+非静态页面+JSON对象+请求转发与请求重定向)

目录 1. 返回静态页面 2. 返回非静态页面 2.1 ResponseBody 返回页面内容 2.2 RestController ResponseBody Controller 2.3 示例:实现简单计算的功能 3. 返回JSON对象 3.1 实现登录功能&#xff0c;返回 JSON 对象 4. 请求转发(forward)或请求重定向(redirect) 4.1 请…...

编程日记 2023/7/28 1:09:16

k8s集群部署（使用kubeadm部署工具进行快速部署，相关对应版本为docker20.10.0+k8s1.23.0）

1. 安装要求 在开始之前&#xff0c;部署Kubernetes集群机器需要满足以下几个条件&#xff1a; 一台或多台机器&#xff0c;操作系统 CentOS7.x-86_x64硬件配置&#xff1a;2GB或更多RAM&#xff0c;2个CPU或更多CPU&#xff0c;硬盘20GB或更多可以访问外网&#xff0c;需要拉…...

编程日记 2023/7/28 1:08:15

SIP视频对讲sip广播网关

SV-PA2是专门对行业用户需求研发的一款SIP音视频对讲&#xff0c;媒体流传输采用标准IP/RTP/RTSP协议。它很好的继承了锐科达话机稳定性好、电信级音质的优点&#xff0c;且完美兼容当下所有基于SIP的主流IPPBX/软交换/IMS平台,如Asterisk, Broadsoft, 3CX, Elastix 等。它集多…...

编程日记 2023/7/28 1:07:13

prometheus直方图实践

目录 1.简介 2.方案 1.简介 Prometheus提供了Counter、Gauge、Histogram、Summary四类指标&#xff08;详见Metric types | Prometheus&#xff09;&#xff0c;可以通过"github.com/prometheus/client_golang/prometheus"自定义采集指标、注册、采集数据、发布UR…...

编程日记 2023/7/28 1:06:12

【C语言进阶篇】指针都学完了吧！那回调函数的应用我不允许还有人不会！

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《C语言初阶篇》 《C语言进阶篇》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 &#x1f4cb; 前言&#x1f4ac; 函数指针数组&#x1f4ad; 函数指针数组的定义&#x1f4ad; 函数指针数组的…...

编程日记 2023/7/28 1:05:10

专注：如何提高专注力和注意力的简要指南

专注力和集中力可能很难掌控的很好。大多数人都想学习如何提高注意力和注意力。但真的做到了&#xff1f;我们生活在一个嘈杂的世界里&#xff0c;不断的分心会使注意力难以集中。 此指南包含有关如何获得并保持专注的研究。我们将分解提升您的思维并关注重要事物背后的理论依…...

编程日记 2023/7/28 1:04:09

Linux查看内存的几种方法

PS的拼接方法 ps aux|head -1;ps aux|grep -v PID|sort -rn -k 4|head 进程的 status 比如说你要查看的进程pid是33123 cat /proc/33123/status VmRSS: 表示占用的物理内存 top PID&#xff1a;进程的ID USER&#xff1a;进程所有者 PR&#xff1a;进程的优先级别&#x…...

编程日记 2023/7/28 1:03:09

selenium定位rect元素

rect元素属性 rect元素的属性如下&#xff1a; x&#xff1a;此属性确定矩形的x坐标。 值类型&#xff1a;| ; 默认值&#xff1a;0 动画&#xff1a;是y&#xff1a;此属性确定矩形的y坐标。 值类型&#xff1a;| ; 默认值&#xff1a;0 动画&#xff1a;是width&#xff1a…...

编程日记 2023/7/28 1:02:07

uniapp ＜textarea＞组件的踩坑

1、ios真机上&#xff0c;textarea输入时会触发页面其他点击事件&#xff0c; 解决方法&#xff1a;把textarea封装成基础组件&#xff0c;绕过这个bug。 2、使用auto-height属性&#xff0c;安卓真机上&#xff0c;会导致textarea高度异常&#xff0c; 官方人员解释&#xf…...

编程日记 2023/7/28 1:01:06

README.md 文档使用 treer 生成树形项目结构

一、前言 前后端编写 README.md 文档的时候&#xff0c;常常需要描写项目的结构&#xff0c;使用 tree 命令生成的目录又不能忽略某个目录&#xff0c;不方便。后来我找到了可以忽略某些目录的 treer命令 &#xff0c;特此记录一下: 二、使用 treer 生成项目结构 全局安装tr…...

编程日记 2023/7/28 1:00:05

朝花夕拾思维导图怎么画？看看这种绘制方法

朝花夕拾思维导图怎么画&#xff1f;绘制思维导图的好处有很多&#xff0c;首先它可以帮助人们更好地组织和管理知识&#xff0c;提高工作效率和学习效果。其次&#xff0c;绘制思维导图可以帮助人们更好地记忆知识点和理解知识点。总之&#xff0c;绘制思维导图可以帮助人们更…...

编程日记 2023/7/28 0:59:03

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/8/10 5:27:29

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/13 17:43:37

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/9/6 15:50:17

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/9/12 0:21:24

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/7/7 21:48:53

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2025/9/6 1:25:52