js导出文件的两种方法

方法一：利用form表单下载：

form的submit方法可以将表单数据提交到接口，target属性可以设置在本页面还是新页面提交

  const saveAllHandle = async () => {
    let exportData = exportFc ? exportFc() : {};
    // 外部传来的参数
    let data = {
      current: 1,
      ...exportData,
    };
    let params = Object.keys(data)
      .filter((key) => data[key] !== null && data[key] !== undefined)
      .reduce((acc, key) => ({ ...acc, [key]: data[key] }), {});
    // 生成的导出节点
    let derivedNode = document.querySelector('#derivedNode'); 
    if (derivedNode) {
      document.body.removeChild(derivedNode);
    }
    const hideDiv = document.createElement('div');
    hideDiv.setAttribute('id', 'derivedNode');
    // 在本页的body中插入form节点
    document.body.appendChild(hideDiv);
    const form = document.createElement('form');
    hideDiv.style.display = 'none';
    form.setAttribute('target', '_self');
    form.setAttribute('action', exportUrl);
    form.setAttribute('method', methodType);
    document.body.appendChild(hideDiv);
    hideDiv.appendChild(form);
    Object.keys(params).forEach((key) => {
      const input = document.createElement('input');
      input.setAttribute('name', key);
      input.setAttribute('value', params[key].toString());
      form.appendChild(input);
    });
    form.submit();
  };

---

方法二：利用blob转换

利用接口返回的文件流，进行blob转换，再生成a标签，新页中打开

/* 下载文件流 */
export const downloadBlobFlow = (res, type, filename) => {
// 创建blob对象，解析流数据
const blob = new Blob([res], {
// 设置返回的文件类型
// type: 'application/pdf;charset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel
type: type
})
// 这里就是创建一个a标签，等下用来模拟点击事件
const a = document.createElement('a')
// 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
const URL = window.URL || window.webkitURL
// 根据解析后的blob对象创建URL 对象
const herf = URL.createObjectURL(blob)
// 下载链接
a.href = herf
// 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
a.download = filename
document.body.appendChild(a)
// 点击a标签，进行下载
a.click()
// 收尾工作，在内存中移除URL 对象
document.body.removeChild(a)
window.URL.revokeObjectURL(herf)
}