项目中我们经常会遇到需要下载文件的功能，静态的文件资源可以使用 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 类单独放到一个文件，使用时再引入。
