js 文件下载

项目中我们经常会遇到需要下载文件的功能，静态的文件资源可以使用 a 标签下载，动态的则需要我们通过 js 处理，so 下面封装了一个文件下载的类。

// 文件下载类
class Download {
  /*
  * url 接口地址
  * data 请求数据，默认为 {}
  * */
  constructor(url, data = {}) {
    this.url = url;
    this.data = data;
  }

  // post 方式下载
  post() {
    // 创建一个 form 并设置 action, method, display
    const form = document.createElement('form');
    form.action = this.url;
    form.method = 'post';
    form.style.display = 'none';

    // 遍历参数，依次创建 input 并设置 name，value 然后追加到 form
    Object.keys(this.data).forEach(key => {
      const input = document.createElement('input');
      input.name = key;
      input.value = this.data[key];
      form.appendChild(input);
    });

    // 创建 button 并设置 type 然后追加到 form
    const button = document.createElement('button');
    button.type = 'submit';
    form.appendChild(button);

    // 将 form 追加到 body 并触发提交事件，然后移除 form
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  }

  // get 方式下载
  get() {
    const params = [];
    // 遍历参数并 push 到 params
    Object.keys(this.data).forEach(key => {
      params.push(`${key}=${this.data[key]}`);
    });

    // 拼接 url
    const url = params.length ? `${this.url}?${params.join('&')}` : this.url;
    // 创建 iframe 并设置 src，display
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.display = 'none';

    // 当触发 iframe 的 onload 事件(下载完成)时移除 iframe
    iframe.onload = () => {
      document.body.removeChild(iframe);
    };
    // 将 iframe 追加到 body
    document.body.appendChild(iframe);
  }
}


// 使用
const url = 'http://www.****.com';
const data = {id: ***};
// post 下载
new Download(url, data).post();
// get 下载
new Download(url, data).get();

项目中我们最好把 Download 类单独放到一个文件，使用时再引入。

github地址，欢迎 star