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

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

news 2025/7/6 22:55:05

        其实这篇应该算是一篇“水”文章，为什么要这么“水”呢，除了最近南方的气候闷热难耐需要降温之外，另一个主要原因，这里面所写的代码均是由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

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/7/5 18:36:22

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/7/5 15:41:32

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/6 6:06:39

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/6/19 5:45:52

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/7/5 8:46:40

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/6/19 4:31:50

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/7/4 13:19:27

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/7/5 18:08:21

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2025/7/6 11:41:02