若依单体版导出Excel动态选择导出特定的列

精通Hello World点war

已于 2024-07-16 17:12:30 修改

阅读量1.1k

点赞数 9

文章标签： excel javascript spring boot

于 2024-05-11 17:17:15 首次发布

本文链接：https://blog.csdn.net/weixin_48817925/article/details/138675381

版权

一、可以采用两种方式去实现导出特定的列

1.第一种就是直接获取列表右侧中的列选择中，所勾选的列

a.将得到的selectedColumns ，传到后端,可以增加一个

            var selectedColumns = [];
            // 初始化输出已选中的列
             function outputSelectedColumns() {
                 $('.dropdown-menu input[type="checkbox"]:checked').each(function() {
                     var field = $(this).data('field');
                     selectedColumns.push(field);
                 });
             }
             // 在页面加载时调用一次
             outputSelectedColumns();
             // 在这里添加代码以处理勾选了显示的列
             $('.dropdown-menu input[type="checkbox"]').on('change', function() {
                 outputSelectedColumns();
             });

b.增加传参exportUrl: prefix + "/export/{selectedColumns}",

        $(function() {

            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                recoveryUrl: prefix1 + "/add/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export/{selectedColumns}",

c.自己新增一个导出事件，用于选择列导出，处理选择列的参数传递

            // 导出数据
            exportExcel1: function(formId,selectedColumns) {
                table.set();
                $.modal.confirm("确定导出所有" + table.options.modalName + "吗？", function() {
                    var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
                    var params = $("#" + table.options.id).bootstrapTable('getOptions');
                    var dataParam = $("#" + currentId).serializeArray();
                    dataParam.push({ "name": "orderByColumn", "value": params.sortName });
                    dataParam.push({ "name": "isAsc", "value": params.sortOrder });
                    $.modal.loading("正在导出数据，请稍候...");
                    var url = table.options.exportUrl.replace("{selectedColumns}", selectedColumns);
                    $.post(url, dataParam, function(result) {
                        if (result.code == web_status.SUCCESS) {
                            window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
                        } else if (result.code == web_status.WARNING) {
                            $.modal.alertWarning(result.msg)
                        } else {
                            $.modal.alertError(result.msg);
                        }
                        $.modal.closeLoading();
                    });
                });
            },

d.后端导出接口，对传递来的选择列进行处理，主要是调用util.hideColumn方法，这个是若依自带的一个隐藏列属性方法，

    /**
     * 隐藏Excel中列属性
     *
     * @param fields 列属性名 示例[单个"name"/多个"id","name"]
     * @throws Exception
     */
    public void hideColumn(String... fields)
    {
        this.excludeFields = fields;
    }

获取到导出类的所有属性名，再根据勾选的列，去排除已经勾选的项，将未勾选的项过滤出来，再使用hideColumn方法去隐藏，即可导出想要的数据

    // 获取指定类的所有属性名
    private String[] getAllColumns(Class<?> clazz) {
        List<String> columns = new ArrayList<>();
        Field[] fields = clazz.getDeclaredFields();
        for (Field field : fields) {
            columns.add(field.getName());
        }
        return columns.toArray(new String[0]);
    }

    public AjaxResult export(@PathVariable("selectedColumns") String[] selectedColumns,StockBaseInfo stockBaseInfo) {
        Map<String, String[]> map = new HashMap<>();
        String[] allColumns = getAllColumns(StockBaseInfo.class);
        // 将 selectedColumns 转换为 Set，以便更快地检查是否包含某个属性
        Set<String> selectedSet = new HashSet<>(Arrays.asList(selectedColumns));

        // 使用列表来存储未选择的列
        List<String> remainingColumns = new ArrayList<>();

        // 遍历所有列，并将未选择的列添加到 remainingColumns 列表中
        for (String column : allColumns) {
            if (!selectedSet.contains(column)) {
                remainingColumns.add(column);
            }
        }

        // 将 remainingColumns 转换回数组
        String[] finalColumns = remainingColumns.toArray(new String[0]);
        ExcelUtil<StockBaseInfo> util = new ExcelUtil<StockBaseInfo>(StockBaseInfo.class);
        util.setExtendCombos(map);
        util.hideColumn(finalColumns);
        return util.exportExcel(list, "信息数据");

2.第二种就是在导出按钮中增加一个处理页面，可以使用字典（字典键值使用属性名，当然为了安全考虑，可以自己加解密），使用复选框，这里勾选要导出列

a.导出按钮触发方法，弹出选择页面

        function exportExcel(){
            var title = "导出操作";
            var url = prefix + "/exportSelect";
            layer.open({
                type: 2,
                area: [ '800px', '550px'],//
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: title,
                content: url,
                btn: ['确定', '关闭'],
                // 弹层外区域关闭
                shadeClose: true,
                yes: function (index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    var exportFields = [];
                    var checkboxes = iframeWin.contentWindow.document.querySelectorAll('input[name="exportFields"]:checked');
                    checkboxes.forEach(function(checkbox) {
                        exportFields.push(checkbox.value);
                    });
                    if(exportFields==null || exportFields==''){
                        $.modal.alert('请选择要导出的字段', modal_status.WARNING);
                    }else{
                        $.table.exportExcel1("formId",exportFields);
                        layer.close(index);
                    }
                },
                cancel: function (index) {
                    return true;
                }
            });
        }

b.弹出选择页面

    /**
     * 跳转到导出选择页面
     *
     * @param mmap
     * @return
     */
    @RequiresPermissions("stock:baseinfo:export")
    @GetMapping("/exportSelect")
    public String exportSelect(ModelMap mmap) {
        return prefix + "/exportSelect";
    }

c.选择页面代码，字段少也可以不使用字典

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('导出')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="formId" >
            <div class="form-group">
                <label class="col-sm-3 control-label">导出字段：</label>
                <div class="col-sm-8" th:with="type=${@dict.getType('stock_export_fields')}">
                    <label th:each="dict : ${type}" class="check-box">
                        <input name="exportFields" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}">
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-8">
                    <a class="btn btn-primary btn-rounded btn-sm" onclick="allSelect(true)"><i class="fa fa-check"></i>&nbsp;全选</a>
                    <a class="btn btn-warning btn-rounded btn-sm" onclick="allSelect(false)"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "stock/baseinfo";
        $(function() {

        });
        function allSelect(s) {
            var checkboxes = document.querySelectorAll('input[name="exportFields"]');
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = s;
                if (s) {
                    checkbox.closest('.icheckbox-blue').classList.add('checked');
                } else {
                    checkbox.closest('.icheckbox-blue').classList.remove('checked');
                }
            });
        }
    </script>
</body>
</html>

d.选择后一样触发exportExcel1

            // 导出数据
            exportExcel1: function(formId,selectedColumns) {
                table.set();
                $.modal.confirm("确定导出所有" + table.options.modalName + "吗？", function() {
                    var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
                    var params = $("#" + table.options.id).bootstrapTable('getOptions');
                    var dataParam = $("#" + currentId).serializeArray();
                    dataParam.push({ "name": "orderByColumn", "value": params.sortName });
                    dataParam.push({ "name": "isAsc", "value": params.sortOrder });
                    $.modal.loading("正在导出数据，请稍候...");
                    var url = table.options.exportUrl.replace("{selectedColumns}", selectedColumns);
                    $.post(url, dataParam, function(result) {
                        if (result.code == web_status.SUCCESS) {
                            window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
                        } else if (result.code == web_status.WARNING) {
                            $.modal.alertWarning(result.msg)
                        } else {
                            $.modal.alertError(result.msg);
                        }
                        $.modal.closeLoading();
                    });
                });
            },

e.后端也是采用同一个处理方法，也可以参考第一种方法的后端处理