html利用a标签实现下载本地的文件

article/2025/9/28 12:31:34

        在写html页面的时候,需要在网页上提供一个下载按钮可以下载我自己电脑中的文件。我已经知道了该文件的路径,但是之前看了很多文章都没找到正确办法,一直不知道如何能够下载本地的文件,经过不断实验发现,可以利用a标签中的downlo属性,同时将href属性设置为文件的路径,注意:该路径对html页面来说是相对路径。

下面举个例子:

 这是图片和html页面所在的位置,可以知道对于upload.html来说,福登.jpg的相对路径就是:./static/store\\img\\福登.jpg,因此在upload.html中,可以这样设置a标签:
 

<a href="./static/store\\img\\福登.jpg" download="福登.jpg"><button class="down">下载</button></a>

其中download指明该文件用于下载,它的取名可以为任意值,一般用于指定下载后的文件的名称。button是我添加的一个按钮,这个有没有无所谓的。

当我把鼠标放在下载那按钮上时,电脑左下角会出现这个文件所在的位置:127.0.0.1:5000/static/store/img/福登.jpg

 

 点击下载后可以选择下载的位置,最后下载成功!

 


我认为最重要的就是,href中的路径一定是文件相对于这个html页面的相对路径,只要相对路径设置对了,就可以在页面中提供本地的文件供下载了。


http://chatgpt.dhexx.cn/article/mk2qRP4D.shtml

相关文章

一、<a>标签如何实现下载

实习期间负责的第一个项目&#xff1a;广东互联网协会官网。其中有一个很常见的功能----点击下载。 页面截图 在此之前&#xff0c;我所认识的<a>标签只是用于页面跳转的&#xff0c;实现文件下载是如何做到的呢&#xff1f; 答案是&#xff1a;使用href与download属性 …

面试官:如何用a标签实现文件下载?(一文带你手撕知识点)

前言 大家好&#xff0c;今天给大家带来前端小知识&#xff1a;前端利用a标签实现文件&#xff08;图片&#xff09;下载&#xff0c;也就是教大家利用a标签或者是 window.open() 来实现下载功能。 文章目录 前言常用方式方法分析代码实现 常用方式 <a href"url"…

Jquery之遍历元素

J q u e r y Jquery Jquery之遍历元素 使用 e a c h ( ) each() each()方法传入函数两个参数分别为 i n d e x , d o m index,dom index,dom对象。 <body><div>1</div><div>2</div><div>3</div> </body> <script src&quo…

jQuery 遍历数据

在jQuery 中&#xff0c; $.each( )方法主要用于遍历数据&#xff0c;通过该方法&#xff0c;我们可以遍历任何一个对象&#xff0c;比如数组和对象。 语法格式&#xff1a; $.each(object,function(index,ele))示例&#xff1a; &#xff08;1&#xff09;遍历数组的数据 …

jQuery - 元素遍历

前言&#xff1a; 一提到“遍历”,大家一般都能联想到 each() 或者 for()等语法&#xff0c;但是在jQuery中究竟什么是遍历&#xff1f; 什么是遍历&#xff1a; jQuery 遍历&#xff0c;意为"移动"&#xff0c;用于根据其相对于其他元素的关系来"查找&qu…

Jquery-节点遍历4种方法

节点遍历 遍历子元素 遍历同辈元素 遍历前辈元素 其他遍历方法 遍历子元素 children()方法可以用来获取元素的所有子元素 $(selector).children([expr]); 获取<section>的子元素&#xff0c;但不包含子元素的子元素 var $section $("section").childr…

jq遍历元素

jq遍历元素 通过jq遍历元素、并控制一些元素的属性&#xff08;显示/隐藏、value、src等等&#xff09;&#xff0c;是我们在开发之中比较常见的操作&#xff0c;也为我们的业务功能扩宽了方向&#xff0c;接下来我将结合近段时间在工作上的际遇粗略介绍一下一些稍稍复杂的jq遍…

JS 遍历

目录 1. for 数组遍历2. for ... of3. forEach( )4. some( )5. every( )6. filter( )7. map( )8. find( )9. findIndex( )10. reduce( )11. reduceRight( ) 对象遍历1. for ... in2. Object.keys( )3. Object.values( )4. Object.entries( )5. Object.getOwnPropertyNames( ) 1…

数据库——数据字典

数据库——数据字典是什么&#xff1f; 一.数据字典以及使用场景&#xff1a; User表&#xff0c;User主体有很多属性&#xff0c;比如证件&#xff08;身份证、居住证、港澳通行证…&#xff09;地区&#xff08;河北、河南、北京…&#xff09;等&#xff0c;然后表建好了&…

数据库设计--数据字典

数据字典定义 数据字典&#xff08;data dictionary&#xff09;是对于数据模型中的数据对象或者项目的描述的集合&#xff0c;这样做有利于程序员和其他需要参考的人。分析一个用户交换的对象系统的第一步就是去辨别每一个对象&#xff0c;以及它与其他对象之间的关系。这个过…

解决Error: ENOENT: no such file or directory, scandir ‘xxx\node-sass\vendor‘

解决Error: ENOENT: no such file or directory, scandir xxx\node-sass\vendor 前端项目持续部署打包中出现一个奇怪的问题&#xff0c;记录一下。 cnpm install 安装依赖成功 cnpm run build 构建时失败了&#xff0c;错误表示没有 D:\andex\stofrontend\node_modules\node…

Syntax Error: Error: ENOENT: no such file or directory, scandir ‘D:

在使用npm安装node-sass的时候&#xff0c;可能会出现如下的报错&#xff1a; Syntax Error: Error: ENOENT: no such file or directory, scandir D:\work\ 解决方案是执行以下方法&#xff1a; npm rebuild node-sass

扫描dir目录函数之scandir()

scandir: 读取特定的目录数据头文件: dirent.h 函数定义: int scandir(const char *dir, struct dirent ***namelist, int (*select)(const struct dirent *), int (*compar)(const struct dirent**, const struct dirent**)); 说明: scandir()会扫描参数dir指定的目录文件, …

解决Error: ENOENT: no such file or directory, scandir

解决Error: ENOENT: no such file or directory, scandir xxx\node-sass\vendor 前端项目持续部署打包中出现一个奇怪的问题&#xff0c;记录一下。 cnpm install 安装依赖成功 npm run build 构建时失败了&#xff0c;错误表示没有 D:\andex\stofrontend\node_modules\nod…

Module build failed: Error: ENOENT: no such file or directory, scandir node_modules\node-sass\vendor

npm install 报错 Module build failed: Error: ENOENT: no such file or directory, scandir D:\workspaces\xxx\node_modules\node-sass\vendor npm install node-sass 或者 npm rebuild node-sass 即可 下载完成后项目成功启动。

解决Vue Disconnected from UI server errno: -4058, syscall: ‘scandir‘, code: ‘ENOENT‘,

启动vue ui时出现上述报错 查看powershell中的错误提示 发现问题出在扫描项目时项目中少了某个文件夹 解决方法&#xff1a;手动创建该文件 问题解决

npm安装electron时报Error: EPERM: operation not permitted, scandir.....

刚弄完vue脚手架,准备安装electron写个桌面应用&#xff0c;运行命令vue add electron-builder一直报错 Error: EPERM: operation not permitted, scandir C:\Users\ &#xff0c;百度解释说因为没有权限操作&#xff0c;于是百度试各种方法&#xff0c; 打开黑窗口一遍遍尝试&…

解决“: no such file or directory, scandir ‘..\node_modules\node-sass\vendor“

一、报错信息 二、出现原因 在下载包完成启动项目时出现 Error: ENOENT: no such file or directory, scandir ‘D:…\signpay-admin-new\node_modules\node-sass\vendor’ 三、解决办法 重新下载node-sass包即可 npm rebuild node-sass

解决 no such file or directory, scandir ‘node_modules\node-sass\vendor 报错

运行项目突然报错【no such file or directory, scandir node_modules\node-sass\vendor】这个错误 报错说是找不到node-sass文件路径&#xff0c;最后找到了解决方案 错误截图如下&#xff1a; 重新构建一下npm rebuild node-sass包 npm rebuild node-sass 再直接运行&…

C语言测试。自己实现scandir 函数

在C语言课程的后端&#xff0c;讲完指针和标准文件IO处理&#xff0c;我会做出一个难度较大练习&#xff0c;题目就是&#xff0c; 利用标准的目录处理函数 opendir/readdir/closedir实现类似于 scandir的功能。其中接口要scandir 函数一致。 这个题目看起来简单&#xff0c;实…