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

js 檔案下載

相關文章