a 标签下载总结

最近迷上在浏览器端编写 js 脚本，由于频繁需要创建动态标签下载数据，所以做一个小总结。

1、动态创建 a 标签

// 创建下载标签
  createElementDownLoad(url) {
    if (!document) { throw new Error("document 对象不存在！"); }
    const a = document.createElement("a");
    a.download;
    a.target = "_blank";
    a.href = this.mergePath(url);
    console.log(this.mergePath(url));
    // 触发点击
    a.click();
  }

属性	说明
download	下载的资源的名称
target	打开该连接的方式（ _self、_blank）
href	资源的地址（本地、远程地址）

2、远程普通文件的下载

• 需要在 href 属性中添加需要下载的文件的地址
• download 属性用于设置下载的文件的名称

3、自定义文本下载

• 需要将文本转化为特定格式数据（这里已 Blob 为例）

  // 保存为 Blob 文件流
  saveAsFileStream(data) {
      const content = data;
      return new Blob(
          [content], 
          { type: "text/plain;charset=UTF-8" }
      );
  }
  

• 然后需要将 blob 数据生成为 url

  transformAsURL(blob){
      return window.URL.createObjectURL(blob);
  }
  

• 创建下载

  const a = document.createElement("a");
  const content = "this is data";
  a.download = Date.now() + Math.round(Math.random() * 50 * 1000) + '.txt';
  a.target = "_blank";
  a.href = transformAsURL(saveAsFileStream(content));
  // 触发点击
  a.click();
  

PS. Blob 对象表示一个不可变、原始数据的类文件对象（详情）

PS. URL.createObjectURL() 静态方法用于创建指向特定数据的 URL ，该方法接收一个参数（File对象、Blob对象、MediaSource对象）作为源创建URL (详情)

4、图片的下载

（由于浏览器自带对图片的处理，所以当触发 a 标签时会自动打开图片文件）

• 一般来说，在携带图片地址链接的 a 标签中添加 download 属性即可实现下载。

• 对于远程图片，需要在图片链接上补充参数

  ?response-content-type=application/octet-stream

PS. 浏览器运行自定义脚本文件方式

• 右键打开 开发者工具

• 选择 Sources

• 新建 New snippet

• 保存（ctrl + s）
  自定义脚本文件方式

• 右键打开 开发者工具

• 选择 Sources

• 新建 New snippet

• 保存（ctrl + s）

• 运行