如何利用a标签实现下载功能

·  阅读 142
1.直接在a标签内部使用属性指定下载链接和下载文件名字,例如

    <a :download="item.fileName" :href="item.fileUrl">{{item ? item.fileName : "" }}</a>
    利用href属性指定了下载地址,利用download属性指定下载的文件名字
   
 2.动态创建a标签,例如
     downloadFile(file) {
      // console.log(file, "file...");
      const link = document.createElement("a"); // 创建a标签
      link.style.display = "none";
      link.href = file.fileUrl;
      link.download = file.fileName;
      document.body.appendChild(link);
      link.click(); // 执行下载
      document.body.removeChild(link); // 释放标签
    },
    
  3.
  /**
 * 不支持ie
 * @param {string} url 下载调用的url
 * @param {string} fileName  下载调用的文件名称
 */
    export function newDownLoadFileName(url, fileName) {
      const x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = "blob";
      x.onload = function() {
      //会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。
      这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 
      对象表示指定的 File 对象或 Blob 对象。
        const url = window.URL.createObjectURL(x.response);
        const a = document.createElement("a");
        a.href = url;
        a.download = fileName;
        a.click();
      };
      x.send();
    }
    第三种方法不兼容IE,自己需要注意一下
 
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改