导出实现(利用生成form形式,支持数组对象形式)
2023-12-13 06:41:32
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>
);
};
文章来源:https://blog.csdn.net/qq_60178319/article/details/134952360
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!