导出实现(利用生成form形式,支持数组对象形式)

import React from 'react';
import { Popconfirm, Button } from 'antd';

export default ({ exportUrl, exportFc, methodType = 'get', text = '导出' }) => {
  const saveAllHandle = async () => {
    let exportData = exportFc ? exportFc() : {};
    let data = {
      current: 1,
      ...exportData,
    };
    let params = Object.fromEntries(
      Object.entries(data).filter(
        ([key, value]) =>
          value !== null &&
          value !== undefined &&
          Object.keys(value).length !== 0,
      ),
    );
    // 生成的导出节点
    let derivedNode = document.querySelector('#derivedNode');
    if (derivedNode) {
      document.body.removeChild(derivedNode);
    }
    const hideDiv = document.createElement('div');
    hideDiv.setAttribute('id', 'derivedNode');
    document.body.appendChild(hideDiv);
    const form = document.createElement('form');
    hideDiv.style.display = 'none';
    form.setAttribute('target', '_self');
    form.setAttribute('action', exportUrl);
    form.setAttribute('enctype', "multipart/form-data"); 
    form.setAttribute('method', methodType);
    document.body.appendChild(hideDiv);
    hideDiv.appendChild(form);

    const formData = new FormData();

    const formDateProc = (formData, data, keyArray = []) => {
      if (!formData) return;

      /* 当data是数组的时候,data中的数据需要使用'[]'去索引,故先对数组数据做处理 */
      const keys =
        data instanceof Array
          ? Object.keys(data).map((v) => parseInt(v, 10))
          : Object.keys(data);

      /* 对数组及对象的索引方式做处理 */
      const keyProc = (key) =>
        typeof key === 'number' ? `[${key}]` : `.${key}`;
      keys.forEach((key) => {
        /* 递归处理data中的Array及Object的情况 */
        if (data[key] instanceof Object)
          formDateProc(formData, data[key], [...keyArray, key]);
        else if (data[key]) {
          /* 当keyArray中没值的时候直接使用key作为formData的key反之需要使用keySerialized作为key */
          const keySerialized = keyArray.reduce(
            (pre, cur, index) => `${pre}${index ? `${keyProc(cur)}` : cur}`,
            '',
          );
          if (!keySerialized) formData.append(key, data[key]);
          else formData.append(`${keySerialized}${keyProc(key)}`, data[key]);
        }
      });
    }; 
    const submitDataCopy = JSON.parse(JSON.stringify(params));
    formDateProc(formData, submitDataCopy) 
    for (const pair of formData.entries()) {
      const input = document.createElement('input');
      console.log(formData.entries(), pair[0], pair[1], 'zzk');
      input.setAttribute('name', pair[0]);
      input.setAttribute('value', pair[1]);
      form.appendChild(input);
    }
    form.submit();
  };

  return (
    <Popconfirm
      title="您确定要导出吗?"
      onConfirm={() => saveAllHandle()}
      okText="确定"
      cancelText="取消"
    >
      <Button type="primary" style={{ marginRight: '15px' }}>
        {text}
      </Button>
    </Popconfirm>
  );
};

你可能感兴趣的:(javascript,前端,开发语言)