导出excel文件前端代码

前端只下载，后端负责数据

// button
class ExportExcel extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
        	dataSource: [],
            columns: [
            	{
                    title: '操作',
                    dataIndex: 'operation',
                    key: 'operation',
                    render: (text, record) => {
                        return (
                            <div>
                                {text === '导出' && (
                                    <Button
                                        type="primary"
                                        onClick={this.exportExcel .bind(this, record)}
                                    >
                                        {record.operation}
                                    </Button>
                                )}
                          	</div>
                        );
                    },
                },
            ],
       	};
    }

// 导出
exportExcel = record => {
    this.props.xxx(
        {
            type: 1,
            id: record.id,
        },
        (code, msg, data) => {
            if (code === 0) {
                this.downloadExcel(data);
                message.success(msg);
            } else if (code < 0) {
                message.error(msg);
            }
        }
    );
};
// xxx为后端excel接口

// 下载
downloadExcel = url => {
    let elemIF = document.createElement('iframe');
    elemIF.src = url;
    elemIF.style.display = 'none';
    document.body.appendChild(elemIF);
};

纯前端，React、Vue
https://blog.csdn.net/weixin_43586120/article/details/87260368

纯前端，React
https://juejin.im/post/5c737e1ee51d45163461aab9