记React+.NetCore API实现动态列导出

1.效果演示

2.用到的第三方类库

前端：React,Dva,Antd

后端：ASP.NET CORE，System.Linq.Dynamic.Core,EPPlus.Core

3.基本思路

　　第一：EF（LINQ）解决动态列的问题，最开始的思路是直接写SQL，后来想想太Low，就放弃了。百度了下，还真有解决方案，System.Linq.Dynamic.Core

第二：.NetCore解决生成Excel文件（流），使用了EPPlus.Core。

第三：解决文件下载的问题，最开始的思路是，直接传流到前端，前端读response.blob()，然后生成文件，结果......失败，因为所有请求要先过Node层，流经过一次转发后，死活没办法变成excel文件。前端能力不强，所以放弃这个思路了。

按照后端的解决方式，就是直接把文件生成到服务端，然后返回路径给前端，前端跳转一次，就可以实现下载，尝试，成功！

4.核心代码

代码只是初版代码，实现了基础需求。仅做参考

后端部分

请求模型：

 public class ExportRequestModel<T>
    {

        public List<ExportRowModel> RowRequest { get; set; }

        /// <summary>
        /// 导出人ID
        /// </summary>
        public string ExportUserID { get; set; }

        /// <summary>
        /// 导出模块名称
        /// </summary>
        public string ModuleName { get; set; }

        public T Where { get; set; }
    }

    public class ExportRowModel
    {
        public string RowName { get; set; }

        public string RowKey { get; set; }

        public string TableName { get; set; }
    }

ExcelHelper.cs:

  public static string Export(ExportRequestModel<TWhere> THead, List<TBody> TBody, string LocalPath)
        {
            try
            {
                string sFileName = $"{THead.ExportUserID}-{Guid.NewGuid()}.xlsx";
                var finallypath = LocalPath + "\\excel\\" + THead.ModuleName;
                DirectoryInfo di = new DirectoryInfo(finallypath);
                if (!di.Exists) { di.Create(); }
                FileInfo file = new FileInfo(Path.Combine(finallypath, sFileName));

                var pack = GetExcelPackage(THead.RowRequest, TBody);
                pack.SaveAs(file);

                return ("\\excel\\" + THead.ModuleName + "\\" + sFileName).Replace("\\", "/");
            }
            catch (Exception)
            {
                throw;
            }

        }

        private static ExcelPackage GetExcelPackage(List<ExportRowModel> THead, List<TBody> TBody)
        {
            ExcelPackage package = new ExcelPackage();

            var worksheet = package.Workbook.Worksheets.Add("sheet1");
            //循环生成表头
            for (int i = ; i <= THead.Count; i++)
            {
                worksheet.Cells[, i].Value = THead[i - ].RowName;
            }

            //循环值
            for (int i = ; i <= TBody.Count; i++)
            {
                var body = TBody[i - ];
                var bodyPro = body.GetType().GetProperties();
                for (int j = ; j <= bodyPro.Length; j++)
                {
                    if (bodyPro[j - ].Name == "Item")
                    {
                        break;
                    }
                    worksheet.Cells[i + , j].Value = bodyPro[j - ].GetValue(body, null);
                }
            }
            return package;

        }
    }

示例代码

            ApiResult<string> apiResult = new ApiResult<string>();
            List<string> selectKey = new List<string>();
            foreach (var item in request.RowRequest)
            {
                var tabOtherName = string.IsNullOrEmpty(item.TableName) ? item.TableName : item.TableName + ".";
                selectKey.Add($"{tabOtherName}{item.RowKey} as {item.RowName}");
            }
            var ExportList = _studentStatuService.Query()
                .Include(n => n.Payment)
                .Include(n => n.Student)
                .Include(n => n.Student.Department)
                .Where(n => (int)n.StudentType > )
                .HasWhere(request.Where.DepartMentID, n => n.Student.DepartmentID == request.Where.DepartMentID)
                .HasWhere(request.Where.EduMajorID, n => n.Payment.EduMajorId == request.Where.EduMajorID)
                .HasWhere(request.Where.EduSchoolID, n => n.Payment.EduSchoolId == request.Where.EduSchoolID)
                .HasWhere(request.Where.Name, n => n.StudentNo.Contains(request.Where.Name))
                .HasWhere(request.Where.IdCard, n => n.Student.IDCard.Contains(request.Where.IdCard))
                .HasWhere(request.Where.StartTime, n => n.CreateTime>= request.Where.StartTime)
                .HasWhere(request.Where.EndTime, n => n.CreateTime < request.Where.EndTime)
                .Select(n => new StudentLessResponse
                {
                    PhoneNum = n.Student.PhoneNum,
                    School = n.Payment.EduSchoolName,
                    Major = n.Payment.EduMajorName,
                    CreateTime = n.CreateTime.ToString("yyyy-MM-dd HH:mm:ss"),
                    Guid = n.Student.Guid.ToString(),
                    Name = n.Student.Name,
                    DeptName = n.Student.Department.Name,
                    StudentType = (int)n.StudentType,
                    DiplomaType = string.Join("/", EnumHelper.GetDescription(n.DiplomaType)),
                    GetSeason = EnumHelper.GetDescription(n.GetSeason),
                    GetYear = n.GetYear,
                    LevelSeason = EnumHelper.GetDescription(n.LevelSeason),
                    LevelYear = n.LevelYear,
                    StudentNo = n.StudentNo,
                    TemporaryNo = n.TemporaryNo
                })
                .Select($"new ({string.Join(',', selectKey.ToArray())})")
                .ToDynamicList();
            var pack = ExcelHelper<dynamic, StudentPagesRequest>.Export(request, ExportList, LocalPath);

如果需要用到Inner Join

则需要使用SelectMany,具体语法自行百度。

前端代码

Export.js组件：

import React from 'react';
import { Popover, Button, Checkbox, Row, Col, DatePicker } from 'antd';
import PropTypes from 'prop-types';
import { setLocalStorage, getLocalStorage } from '../../utils/cookieHelper';
const { RangePicker } = DatePicker;

class Export extends React.Component {

    state = {
        visible: false,
        checkedValues: getLocalStorage(this.props.moduleName),
        StartTime: null,
        EndTime: null
    }
    onChange = (checkedValues) => {
        const { exportList } = this.props;

        this.setState({ checkedValues });
    }
    export = () => {
        const { checkedValues, EndTime, StartTime } = this.state;
        const { moduleName, onExport, exportList } = this.props;

        setLocalStorage(moduleName, checkedValues);
        const finallyValues = exportList.filter((item, index) => {
            return checkedValues.indexOf(item.RowKey) > -1;
        });
        const data = {
            ModuleName: moduleName,
            RowRequest: finallyValues,
            where: {
                StartTime,
                EndTime
            }
        }
        console.log(data);
        if (onExport) {
            onExport(data);
        }

    }

    onTimeChange = (date, dateString) => {
        this.setState({ StartTime: dateString[0], EndTime: dateString[1] })

    }
    render() {
        const { exportList, moduleName } = this.props;
        const ccontent = (<div>

            <Checkbox.Group onChange={this.onChange} style={{ width: '220px' }} value={this.state.checkedValues}>
                <Row>
                    <div style={{ marginBottom: '12px' }}>
                        <div style={{ marginBottom: '5px' }}> 请选择数据产生的时间：</div>
                        <RangePicker onChange={this.onTimeChange} />
                    </div>

                    {exportList.map((item, index) => {
                        return (<Col span={12}><Checkbox key={item.RowKey} value={item.RowKey}>{item.RowName}</Checkbox></Col>)
                    })}
                </Row>
            </Checkbox.Group>
            <Row style={{ textAlign: 'center', marginTop: '10px' }}>
                <Col span={2}></Col>
                <Col span={10}> <a onClick={this.export}>确定</a></Col>
                <Col span={10}> <a onClick={() => {
                    let visb = !this.state.visible;
                    this.setState({ visible: visb })
                }}>取消</a></Col>
                <Col span={2}></Col>

            </Row></div>);
        return (
            <Popover
                content={ccontent}
                title="请选择导出列"
                trigger="click"
                visible={this.state.visible}
                placement="bottom"

            >
                <Button type="primary" onClick={() => {
                    let visb = !this.state.visible;
                    this.setState({ visible: visb })
                }} icon={'export'} style={{ marginRight: '10px' }}>导出</Button>
            </Popover >
        );
    }
}

Export.propTypes = {
    onExport: PropTypes.func,
    moduleName: PropTypes.string,
    exportList: PropTypes.any
};

export default Export;

使用方式：

最后希望对大家有帮组！