JeecgBoot Online 自定义预览按钮开发记录
功能目标：Online列表增加【预览】行按钮，点击在新标签打开HTML富文本内容，用于查看交易复盘报告
一、整体实现思路
- Online表单新增自定义JS按钮，按钮类型
Js，按钮编码必须和JS增强内函数名完全一致：previewHtml - 在List列表JS增强中编写预览逻辑，新窗口打开HTML，规避Jeecg内置modal的this上下文作用域报错问题
- 关键配置：HTML内容字段必须在【页面属性→列表】勾选
列表查询，否则后端不会返回此字段到前端行数据row中，前端拿不到内容。
二、按钮配置（新增按钮弹窗）
| 项目 | 值 |
|---|---|
| *按钮编码 | previewHtml（必须和JS函数名大小写一致） |
| *按钮名称 | 预览 |
| 按钮样式 | Link |
| 按钮类型 | Js |
| 排序 | 1 |
| 表达式 | 留空 |
| 按钮状态 | 激活 |
三、List JS增强完整代码
位置：Online表单【JS增强】→
list标签页注意：Jeecg Online JS增强是对象字面量，方法之间必须加英文逗号，最后一个函数不加逗号
javascript
one() {
console.log('当前选中行的id', this.selectedRowKeys);
},
three(row) {
console.log('当前行数据', row)
},
beforeDelete(row) {
return new Promise(resolve=>{
console.log('删除数据之前看看数据', row);
resolve();
})
},
previewHtml(row) {
console.log('行数据', row);
// 这里根据你的数据库字段名修改，当前表html内容字段为 html_content
var html = row.html_content || row.htmlContent || '';
if (!html) {
alert("暂无HTML内容，请检查【页面属性-列表】是否勾选该字段");
return;
}
var title = row.title || "HTML页面预览";
var newWin = window.open("");
newWin.document.write(html);
newWin.document.title = title;
newWin.document.close();
}四、踩坑记录（重点）
- ❌ 语法报错
Unexpected identifier 'three'
原因：Jeecg list JS增强是对象字面量，函数之间缺少英文逗号 。每个方法
}后面必须加逗号，最后一个函数除外。
- ❌
Cannot read properties of undefined (reading '$message')
原因：自定义行按钮的执行上下文
this不是vue实例，this.$message/this.$modal/this.$vue全部无法访问。✅ 解决方案：放弃内置弹窗，改用原生
window.open()新开标签预览，alert做提示。
- ❌ 点击预览弹窗提示「暂无HTML内容」，控制台row对象没有html字段
原因：【页面属性-列表】没有勾选HTML字段的
列表查询，后端不返回该字段。列表查询勾选后，表格列可设置隐藏，只用于后端返回数据，前端不展示。
- ✅ 成功现象：点击预览按钮，打开新标签，完整渲染HTML页面。
五、后续扩展备选方案
如果后续想改成弹窗内嵌预览（不新开标签），需要重写纯DOM弹窗，不再依赖jeecg内置modal。
六、操作步骤速查
- 配置自定义按钮，编码
previewHtml - 打开JS增强list，粘贴完整代码，保存
- 页面属性 → 列表，找到HTML字段，勾选【列表查询】
- 保存Online表单，F5刷新页面
- 点击列表行【预览】测试，F12控制台调试字段
要不要我再帮你把这个md精简成一个极简版本，只保留核心代码和坑点，方便直接丢到gitcode仓库？