首页 网络技术
  1. 正文

HTML页面怎么实现点击下载文件

  1.使用<a>标签来完成

  <ahref="/user/test/xxxx.txt"download="文件名.txt">点击下载</a>

  这样当用户打开浏览器点击链接的时候就会直接下载文件。

  但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”;

  以下为例子

  移到标签<a>标签上可以显示文件路径,根据路径提示进行文件路径的补全

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="UTF-8">

  <title></title>

  </head>

  <body>

  <ahref="321.png"download="test.png">点击下载</a>

  </body>

  </html>

  若需从网页上传的图片中进行下载可能会用到以下方法

  获取主机域名:

  location.hostname

  获取端口号:

  location.port

  2.使用按钮进行监听

  按钮监听又可以分为两种方法,

  一是window.open()

  var$eleBtn1=$("#btn1");

  var$eleBtn2=$("#btn2");

  //已知一个下载文件的后端接口:https://codeload.github.com/douban/douban-client/legacy.zip/master

  //方法一:window.open()

  $eleBtn1.click(function(){

  window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");

  });

  二是表单提交

  //方法二:通过form

  $eleBtn2.click(function(){

  var$eleForm=$("<formmethod='get'></form>");

  $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");

  $(document.body).append($eleForm);

  //提交表单,实现下载

  $eleForm.submit();

  });

本文标题:HTML页面怎么实现点击下载文件
本文链接:https://www.qqooo.cn/post/6676.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!