导出图片列时需将html标签替换为纯url：用dom解析安全提取img.src，构造新数据数组调用exportfile()三参数形式导出xlsx，并确保url含协议、无中文未编码。
导出时图片列变成乱码或空值
这是因为 Layui 的 table.exportFile() 默认只处理文本内容，遇到 <img src="..."> 这类 HTML 片段会直接原样导出，Excel 解析不了，显示为空或一堆字符。
解决思路是：在导出前把图片列的 HTML 替换成纯 URL 字符串。不能靠后端拼接，得在前端导出触发前“临时改数据”。
- 用
table.on('exportComplete', ...)拦不住——它只在导出完成后触发，改晚了 - 正确时机是调用
table.exportFile()前，通过done回调拿到原始数据，手动替换src属性值 - 别动原始表格数据（
data数组），只改传给exportFile()的副本，避免影响页面渲染
如何安全提取 img 标签里的 URL
图片列字段值通常是字符串，比如 "<img src="https://xxx.jpg?x-oss-process=image/resize,p_40" alt="头像">"，不能用正则硬扒——有引号嵌套、空格、换行等边界情况容易翻车。
更稳的方式是借 DOM 解析：document.createElement('div') + innerHTML + querySelector('img')，兼容所有合法 HTML 写法。
- 对每一行该列字段，先创建临时
div，设innerHTML为原值 - 用
div.querySelector('img')取到 img 元素，再读src属性（不是getAttribute('src')，防相对路径未解析） - 如果没 img 或 src 为空，保留原字段值（避免误删文字描述）
const extractImgUrl = (htmlStr) => {
const div = document.createElement('div');
div.innerHTML = htmlStr;
const img = div.querySelector('img');
return img && img.src ? img.src : htmlStr;
};
导出调用时怎么注入处理逻辑
Layui 导出不提供“预处理钩子”，只能绕道：自己构造数据，再调用 table.exportFile() 的三参数形式（表头、数据、配置）。
- 先用
table.cache['yourTableId']拿到当前页缓存数据（注意分页场景） - 遍历每行，对目标列（比如
avatar字段）调用extractImgUrl()替换 - 构造新数组作为
data参数，表头（headers）保持原cols配置的field和title - 必须显式传
type: 'xlsx'，否则默认是 csv，不支持长 URL 换行
关键代码片段：
const cacheData = table.cache['userTable'] || [];
const processedData = cacheData.map(row => ({
...row,
avatar: extractImgUrl(row.avatar) // 假设图片列 field 是 avatar
}));
table.exportFile(['姓名', '头像'], processedData, { type: 'xlsx' });
导出 Excel 后 URL 点不开？检查这三点
即使 URL 正确导出，Excel 里点击仍可能打不开，常见于以下原因：
- URL 含中文或空格未编码——Excel 不自动 decode，需提前用
encodeURIComponent()处理（但注意不要双重编码） - 链接协议缺失（如
"xxx.jpg"而非"https://xxx.jpg"）——Excel 只识别完整 URL，缺协议会被当本地路径 - 单元格格式是“常规”而非“超链接”——Layui 导出无法控制 Excel 单元格类型，只能靠用户手动设置：选中列 → 右键 → “设置单元格格式” → “超链接”
最后一句：Layui 本身不操作 Excel 文件结构，所有“可点击”效果都依赖 Excel 自身对纯文本 URL 的识别能力。能导出正确 URL 就算成功，点不点得开，得看 Excel 给不给面子。
