js-处理下载（get方法和post方法）

【2020.5.25】已将get和post做了处理，可以从同一个入口进入，通过参数决定使用post还是get方法
git地址 https://github.com/miaomiaoG/downloadjs/tree/master

记录一下这次处理下载的方式，下次有类似的可以快速定位。用js处理下载的两种方法，1处理get请求，2处理post请求

1、 get请求

通过在页面创建隐藏的a标签的方式进行下载，可以通过a标签的download属性设置下载后的文件的名字

const download = (src, downloadName) => {
  const aDom = document.createElement('a');
  aDom.style.display = 'none';
  if (downloadName) {
    aDom.download = downloadName;
  }
  aDom.href = src;
  aDom.target = '_blank';
  document.body.appendChild(aDom);
  aDom.click();
  document.body.removeChild(aDom);
};

2、post请求

通过form表单的形式进行下载，服务端需要把接受数据的类型改为formdata而不是json，值是数组时需要创建多个同名input进行传值，不能赋值给一个input的value。

const createInputItem = (name, value) => {
  let formInputItem = document.createElement('input');
  formInputItem.setAttribute('type', 'hidden');
  formInputItem.setAttribute('name', name);
  formInputItem.setAttribute('value', value);
  return formInputItem;
};

export const postDownload = (url, obj) => {
  let downloadForm = document.createElement('form'); // 定义一个form表单
  downloadForm.setAttribute('style', 'display:none');// 将表单隐藏
  downloadForm.setAttribute('target', '_blank');
  downloadForm.setAttribute('method', 'post');
  downloadForm.setAttribute('action', url);
  Object.entries(obj).forEach(([name, value]) => {
    if (Array.isArray(value)) {
      /*
      * value维数组时创建array.length个name都为给定name的input，value依次为数组的每个元素
      * res:<input name="myname" value="arrray[0]"/>
      *     <input name="myname" value="arrray[1]"/>
      *     ...
      * 最后通过form表单提交
      * */
      value.forEach(item => {
        let formInputItem = createInputItem(name, item);
        downloadForm.appendChild(formInputItem);// 一定要把参数添加到form里
      });
    } else {
      let formInputItem = createInputItem(name, value);
      downloadForm.appendChild(formInputItem);// 一定要把参数添加到form里
    }
  });
  document.body.appendChild(downloadForm);// 将表单放置在页面中
  downloadForm.submit();// 表单提交
  document.body.removeChild(downloadForm);// 移除表单
};