码迷,mamicode.com
首页 > Web开发 > 详细

js文件下载

时间:2021-02-26 13:06:45      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:func   目标   this   点击   let   UNC   url   nload   文件的   

1.<a>标签

  <a> 标签定义超链接,用于从一张页面链接到另一张页面。<a> 元素最重要的属性是 href 属性,它指示链接的目标。HTML5 提供了一些新属性,其中有一个download属性挺有意思的,有了这个属性我们就可以用<a>标签实现文件的下载了。

  <!-- href指示文件路径,download属性定义a标签下载功能,属性值可以更改文件名 -->
  <div>
    <a href="/static/tem.xlsx" download="自定义文件名">下载</a>
  </div>

  href指示文件路径,download属性定义a标签下载功能,属性值可以更改文件名;

  <a>标签下载扩展名.img, .pdf, .txt, .html等格式的文件也都是没有问题的;

  下载静态文件时,有时我们会遇到下载提示“找不到文件”的问题,所以这里href文件的路径尽量放在根目录下的static或者public文件夹下;

 

 2.window.location.href = "文件路径"

  与<a>标签不同的是,<a>点击后立即下载,window.location.href可以封装在方法中,在需要时下载

 

3.前面两种方法在下载图片一类文件时会出现预览,而不想预览直接下载的话可以采取如下方式

download() {
    var request = new XMLHttpRequest();
    request.responseType = "blob";
    let fileUrl = this.qr; // 文件路径
    request.open("GET", fileUrl);
    request.onload = function () {
        var url = window.URL.createObjectURL(this.response);
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.href = url;
        a.download = "二维码";
        a.click();
    }
    request.send();
}

 

js文件下载

标签:func   目标   this   点击   let   UNC   url   nload   文件的   

原文地址:https://www.cnblogs.com/jing-zhe/p/14447368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!