如何为WebDataRocks默认导出设置自定义文件名？

有两种方法可以实现自定义导出文件名，推荐使用beforeExport事件的方式，无需逐个修改工具栏按钮逻辑：

方法一：使用beforeExport事件（推荐） #

1. 修改Pivot组件绑定事件
   在你的Vue模板中，给<Pivot>标签添加:before-export事件绑定：

<Pivot id="pivotid" 
    ref="pivotref" 
    height="650px" 
    :report="report" 
    :toolbar="toolbar" 
    :beforetoolbarcreated="beforetoolbarcreated"
    :before-export="handleBeforeExport"> <!-- 新增此行 -->
</Pivot>

2. 添加事件处理方法
   在methods中新增handleBeforeExport函数，根据选中的日期生成自定义文件名：

handleBeforeExport(event) {
    // 获取选中日期对应的显示标签，没有则用原始日期值
    const dateLabel = this.reportdates.find(item => item.rd_date === this.selectedDate)?.rd_date_label || this.selectedDate;
    // 设置导出文件名，可根据需求调整格式
    event.filename = `工作任务报表_${dateLabel}`;
}

方法二：自定义工具栏导出按钮逻辑 #

如果需要更精细控制单个导出按钮的行为，可以修改customizeToolbar方法，替换默认导出逻辑：

customizeToolbar(toolbar) {
    var tabs = toolbar.getTabs();
    
    // 遍历工具栏标签，替换导出类按钮的点击逻辑
    tabs.forEach(tab => {
        const exportTypes = {
            "wdr-tab-excel": "excel",
            "wdr-tab-csv": "csv",
            "wdr-tab-pdf": "pdf"
        };
        const exportType = exportTypes[tab.id];
        if (exportType) {
            tab.handler = () => {
                const dateLabel = this.reportdates.find(item => item.rd_date === this.selectedDate)?.rd_date_label || this.selectedDate;
                // 调用WebDataRocks导出API，传入自定义文件名
                this.$refs.pivotref.webdatarocks.exportTo(exportType, {
                    filename: `工作任务报表_${dateLabel}`
                });
            };
        }
    });

    // 保留你原本的工具栏标签删除逻辑
    delete tabs[0];
    delete tabs[1];
    delete tabs[2];
    delete tabs[7];
    
    toolbar.getTabs = function() {
        return tabs;
    }
}

两种方法都能实现导出时使用自定义文件名，文件名会自动关联当前选中的日期筛选条件，替换默认的"Pivot"名称。

内容的提问来源于stack exchange，提问作者Smiley