本文摘自PHP中文网,作者不言,侵删。
这篇文章主要介绍了HTML页面点击下载文件的两种实现方法,需要的朋友可以参考下1.使用<a>标签来完成
1 | <a href= "/user/test/xxxx.txt" download= "文件名.txt" >点击下载</a>
|
这样当用户打开浏览器点击链接的时候就会直接下载文件。
但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”;
以下为例子
移到标签<a>标签上可以显示文件路径,根据路径提示进行文件路径的补全
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<title></title>
</head>
<body>
<a href= "321.png" download= "test.png" >点击下载</a>
</body>
</html>
|
若需从网页上传的图片中进行下载 可能会用到以下方法
获取主机域名:
location.hostname
获取端口号:
location.port
2.使用按钮进行监听
按钮监听又可以分为两种方法,
一是window.open()
1 2 3 4 5 6 7 | var $eleBtn1 = $( "#btn1" );
var $eleBtn2 = $( "#btn2" );
$eleBtn1 .click( function (){
window.open( "https://codeload.github.com/douban/douban-client/legacy.zip/master" );
});
|
二是表单提交
1 2 3 4 5 6 7 8 | $eleBtn2 .click( function (){
var $eleForm = $( "<form method='get'></form>" );
$eleForm .attr( "action" , "https://codeload.github.com/douban/douban-client/legacy.zip/master" );
$(document.body).append( $eleForm );
$eleForm .submit();
});
|
相关推荐:
html 网页中的锚点(命名锚记)的使用介绍
以上就是HTML页面点击下载文件的两种实现方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Html怎么把密码隐藏起来
Html基础:文档与网站架构
Html的基础控件有哪些
Html blockquote标签怎么用
Html学习笔记二
Html分段标签是什么
xml和Html有什么区别
Html中table边框颜色怎么设置
什么软件可以将pdf转换为Html
Html command标签怎么用
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML页面点击下载文件的两种实现方法