Weibw's FR
微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：weibw162
本教程视频讲解可以关注本人B站账号进行观看：次世代数据技术
一、需求描述
我们在实际报表开发过程中，会在表格中展示部分图片的，而且一般是以缩略图的形式进行展示。但是某些场景下，我们还是需要放大这些图片进行展示的。这里，作者提供几种展示方式的实现方案。 
本方案的实现步骤如下：
- 将下载好的
enlarge-pic.js文件存放到工程目录中。 - 在图片单元格必须为纯路径文本或者经过
webimage()函数处理过的公式内容。 - 给模板增加页面加载结束事件，设置指定单元格可以放大显示图片。
注1：不支持移动端使用。注2：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用其他版本过程中出现问题可以联系本作者。注3：图片显示仅支持路径形式，不支持数据库存储的二进制数据。
二、具体操作
第一步
将下载好的enlarge-pic.js文件存放到工程目录下，具体路径为：webroot->help->js。
第二步
将图片路径字段直接拖入模板中，或者使用webimage()公式函数进行处理。
第三步
在模板web属性->分页预览设置中增加一个加载结束事件，并在该事件中引入第一步存放的js文件，然后填入如下代码：
javaScript
// 给B列除表头外的单元格增加图片跟随鼠标放大显示事件
EnlargePic({
el: $(".x-table td[id^='B']:not([id^='B1-'])"),
type: "followmouse",
args: { width: 600, height: 400 }
});
// 给C列除表头外的单元格增加图片跟随鼠标放大显示事件
EnlargePic({
el: $(".x-table td[id^='C']:not([id^='C1-'])"),
type: "followmouse",
args: { width: 600, height: 400 }
});
// 给D列除表头外的单元格增加图片固定屏幕中间放大显示事件
EnlargePic({
el: $(".x-table td[id^='D']:not([id^='D1-'])"),
type: "screencenter",
args: { width: 600, height: 400 }
});
// 给E列除表头外的单元格增加点击图片居中放大显示且可关闭事件
EnlargePic({
el: $(".x-table td[id^='E']:not([id^='E1-'])"),
type: "click",
args: { width: 600, height: 400 }
});// 给B列除表头外的单元格增加图片跟随鼠标放大显示事件
EnlargePic({
el: $(".x-table td[id^='B']:not([id^='B1-'])"),
type: "followmouse",
args: { width: 600, height: 400 }
});
// 给C列除表头外的单元格增加图片跟随鼠标放大显示事件
EnlargePic({
el: $(".x-table td[id^='C']:not([id^='C1-'])"),
type: "followmouse",
args: { width: 600, height: 400 }
});
// 给D列除表头外的单元格增加图片固定屏幕中间放大显示事件
EnlargePic({
el: $(".x-table td[id^='D']:not([id^='D1-'])"),
type: "screencenter",
args: { width: 600, height: 400 }
});
// 给E列除表头外的单元格增加点击图片居中放大显示且可关闭事件
EnlargePic({
el: $(".x-table td[id^='E']:not([id^='E1-'])"),
type: "click",
args: { width: 600, height: 400 }
});按照以上步骤配置完后，点击预览即可看到我们需要的效果。
三、接口注释
javascript
EnlargePic({
el: $(".x-table td[id^='B']:not([id^='B1-'])"),
type: "followmouse",
args: { width: 600, height: 400 }
});EnlargePic({
el: $(".x-table td[id^='B']:not([id^='B1-'])"),
type: "followmouse",
args: { width: 600, height: 400 }
});EnlargePic()是主要的函数，该函数的参数解释如下：
| 参数 | 是否必填 | 注释 |
|---|---|---|
| el | 是 | 通过JQ选择器指向需要增加放大事件的单元格所在位置 |
| type | 是 | 图片放大的方式。可选项有followmouse（鼠标悬浮到图片上时，图片会跟随鼠标放大，当鼠标离开图片时会自动关闭）,screencenter（鼠标悬浮到图片上时，图片会在屏幕居中显示，鼠标离开图片后自动关闭）,click（点击图片后，图片会在屏幕中间放大显示，并且在右上角有一个关闭按钮，点击关闭后图片关闭） |
| args | 否 | 用来传递图片的一些其他显示信息 |
| width | 否 | 图片放大后的宽度，默认值为200 |
| height | 否 | 图片放大后的高度，默认值为150 |
四、模板文件下载
扫码即可下载文档示例模板及其他代码文件 如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。