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

这篇具有很好参考价值的文章主要介绍了html利用a标签实现下载本地的文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

下面举个例子:

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

 这是图片和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

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

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

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

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

 

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


我认为最重要的就是,href中的路径一定是文件相对于这个html页面的相对路径,只要相对路径设置对了,就可以在页面中提供本地的文件供下载了。文章来源地址https://www.toymoban.com/news/detail-414476.html

到了这里,关于html利用a标签实现下载本地的文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html网站video标签blob视频如何下载

    在淘宝或tdtu知乎等有时想下载里面的视频资源,看了一下视频标签里的video不是MP4格式url,而是blob+url的方式。 是blob:https并不是一种协议,而是html5中blob对象在赋给video标签后生成的一串标记,blob对象对象包含的数据,浏览器内部会解析 关于Blob原理和方式 blob 其实是 h5 表征

    2024年02月21日
    浏览(62)
  • Springboot + MySQL + html 实现文件的上传、存储、下载、删除

    实现步骤及效果呈现如下: 1.创建数据库表: 表名:file_test 存储后的数据: 2.创建数据库表对应映射的实体类: import com.baomidou.mybatisplus.annotation.IdType ; import com.baomidou.mybatisplus.annotation. TableField ; import com.baomidou.mybatisplus.annotation. TableId ; import com.baomidou.mybatisplus.annotation. Tab

    2024年04月29日
    浏览(46)
  • 使用Java实现远程文件下载到本地目录

    今天开发时遇见了一个下载附件的需求,他的附件是存在一个网盘里查询时只是给我返回了一个https的路径,需要通过这个路径把附件下载到本地的目录里 这里我使用的是网上搜索的图片路径做了一下测试仅供参考 如正文介绍 使用Java实现远程文件下载到本地目录记录就到此

    2024年02月12日
    浏览(51)
  • HTML JS实现点击按钮下载文件功能例子(C知道版)

            其实这篇应该算是一篇“水”文章,为什么要这么“水”呢,除了最近南方的气候闷热难耐需要降温之外,另一个主要原因,这里面所写的代码均是由CSDN的AI文本大模型\\\"C知道\\\"完成,我在这里只是简单记录一下,也方便其他有需求的同学借鉴一下,少绕一些弯路(有

    2024年02月15日
    浏览(41)
  • vue纯前端实现下载excel文件,本地和测试环境都可正常下载

    vue2纯前端实现下载excel文件,本地和测试环境都可正常下载。 1、把后端给的excel文件放到本地项目文件夹中,位置如图所示: 2、在需要展示下载功能的页面中引入该excel文件,如图所示: 3、使用a链接,href绑定引入的excel文件路径,并添加download属性,download属性值就是下载

    2024年02月13日
    浏览(56)
  • vue-cli4前端实现下载本地Excel模板,以及下载静态文件的坑

    a标签的下载功能: 1:bobl ----二进制流文件 Blob对象标识一个不可变、原始数据的类文件对象。Blob表示的不一定是JavaScript原生格式的数据 2:responseType responseType它表示服务器响应的数据类型,由于后台返回来的是二进制数据,所以要把它设为‘blob’ 通过设置responseType为blo

    2024年02月02日
    浏览(57)
  • HTML5中关于解决video标签禁止右键和下载视频的办法

    近期做了一个关于在线文件管理的项目,类似网盘,基本功能包含用户、消息、项目、分享、文件提取、收藏、回收站等主要功能,领挖还有一些office、压缩包、图片、文本、音频和视频的预览功能。 音频我使用的是APlayer,视频使用的是DPlayer,为了做个兼容,视频还有htm

    2024年02月11日
    浏览(73)
  • 【一种使用浏览器读取本地excel、josn等数据文件的方法】Python+JavaScript+HTML实现

    一般来说,为了网络访问安全,浏览器是不能直接加载本地文件的,IE内核的浏览器提供了AX控件实现本地文件的读取,Chrome 86 版本后也提供了相应的API,但都存在使用限制和兼容性问题。有时开发者只是想利用浏览器编制一些简单的脚本完成一些任务,不想学习C、C++、Pyt

    2024年02月07日
    浏览(66)
  • 【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )

    传统 HTML 开发中 , 如果想要向网页中嵌入音频和视频 , 需要 使用 Flash 浏览器插件才能实现 ; 在 HTML5 中 , 使用 多媒体标签 , 即可实现向浏览器中插入音视频 , 多媒体标签如下 : 音频标签 : audio 视频标签 : video HTML 5 的 audio 音频标签 , 支持 ogg / mp3 / wav 三种格式的音频 , 不同的

    2024年02月15日
    浏览(62)
  • CentOS如何使用Docker部署Plik服务并实现公网访问本地设备上传下载文件

    本文介绍如何使用Linux docker方式快速安装Plik并且结合Cpolar内网穿透工具实现远程访问,实现随时随地在任意设备上传或者下载或者共享文件! Plik是一个可扩展且友好的临时文件上传系统,类似于wetransfer。它具有强大的命令行客户端和易于使用的Web UI,支持多个数据后端(文

    2024年04月17日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包