Grafana 表格自定义下载样式。
我这边的方案是通过 grafana嵌套在iframe中，然后获取数据postmessage 给父页面 调用 excel.js 下载。
增加一个html panel , 在 onlint 添加如下代码。
该代码会在目标panel的标题上 增加一个 按钮，点击后触发。
var targetPanelId = 8; setTimeout(function() { var panel = $('.react-grid-item[data-panelid="' + targetPanelId + '"]'); var header = panel.find('[data-testid="header-container"]'); if (header.length === 0) header = panel.find('header'); var btn = $('<button>⬇ Download</button>') .attr('contenteditable', 'false') .css({ 'padding': '2px 12px', 'font-size': '12px', 'background': '#000', 'color': '#fff', 'border': 'none', 'border-radius': '4px', 'cursor': 'pointer', 'user-select': 'none', 'pointer-events': 'auto', 'z-index': '99999' }); btn.on('click', function(e) { e.stopPropagation(); e.stopImmediatePropagation(); // ★ 从 React 内部直接取当前显示的完整数据 function extractData(el) { var fiberKey = Object.keys(el).find(function(k) { return k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$'); }); if (!fiberKey) return null; var fiber = el[fiberKey]; var node = fiber; var depth = 100; while (node && depth-- > 0) { var p = node.memoizedProps || {}; // Grafana 把查询结果放在 props.data.series if (p.data && p.data.series && p.data.series.length > 0) { return p.data.series; } if (p.data && Array.isArray(p.data.fields)) { return [p.data]; } if (p.frames && p.frames.length > 0) { return p.frames; } node = node.return; } return null; } // 从 panel 容器开始找 var frames = null; var dom = panel[0]; // 先从 panel 根元素找 frames = extractData(dom); // 没找到就遍历子元素 if (!frames) { var children = dom.querySelectorAll('div'); for (var i = 0; i < children.length && !frames; i++) { frames = extractData(children[i]); } } if (!frames || frames.length === 0) { console.error('❌ 未找到数据'); return; } // 解析 DataFrame → headers + rows var headers = []; var rows = []; frames.forEach(function(frame) { var fields = frame.fields || []; if (fields.length === 0) return; if (headers.length === 0) { headers = fields.map(function(f) { return f.config && f.config.displayName ? f.config.displayName : f.name || ''; }); } // values 可能是数组、ArrayVector、TypedArray var columns = fields.map(function(f) { var v = f.values; if (Array.isArray(v)) return v; if (v && v.buffer) return Array.from(v.buffer); if (v && v.toArray) return v.toArray(); if (v && typeof v.length === 'number') return Array.from(v); return []; }); var rowCount = columns[0] ? columns[0].length : 0; for (var i = 0; i < rowCount; i++) { var row = []; for (var j = 0; j < columns.length; j++) { var cell = columns[j][i]; // 时间戳转可读 if (fields[j].type === 'time' && typeof cell === 'number') { cell = new Date(cell > 1e12 ? cell : cell * 1000) .toISOString().replace('T', ' ').slice(0, 19); } row.push(cell != null ? cell : ''); } rows.push(row); } }); console.log('📊 表头:', headers); console.log('📊 行数:', rows.length); console.log('📊 前3行:', rows.slice(0, 3)); // postMessage 给父页面 var message = { type: 'GRAFANA_PANEL_DATA', panelId: targetPanelId, timestamp: new Date().toISOString(), data: { headers: headers, rows: rows, rowCount: rows.length } }; if (window.parent && window.parent !== window) { window.parent.postMessage(message, '*'); } else { window.postMessage(message, '*'); } console.log('✅ 已发送 ' + rows.length + ' 行'); }); btn.on('mousedown pointerdown dragstart', function(e) { e.stopPropagation(); e.stopImmediatePropagation(); }); header.css({ 'display': 'flex', 'align-items': 'center' }); header.append(btn); }, 1000);