反饋已提交
網絡繁忙
Finereport 中 toimage 函数展示的图片不能旋转,当需求是点击单元格能弹框展示图片并可旋转、放大,弹框可拖拽等,要如何实现呢?如下图所示:
单元格图片 HTML 显示 ,引入外部 JS 和 CSS 文件。
准备需要的 JS 文件和 CSS 文件,见下面压缩包,解压后放置在%FR_HOME%\webapps\webroot\目录下。如下图所示:
点击可下载:static.zip
新建模板,在 A2 单元格中添加图片地址,B2 单元格中输入 HTML 代码,选择单元格显示方式为「用HTML显示内容」。如下图所示:
HTML 代码如下:
'<a href="javascript:void(0)" data-magnify="gallery2" data-group="g2" data-src="' + a2 + '" data-caption="测试图片"> 点击查看 </a>'
1)点击菜单栏「模板>模板Web属性>引用css」,引用放置在 webroot 目录下的 css 文件。如下图所示:
2)点击菜单栏「模板>模板Web属性>引用JavaScript」,引用放置在 webroot 目录下的 JS文件。如下图所示:
点击菜单栏「模板>模板Web属性>分页预览设置」,选择「为该模板单独设置」,添加一个「加载结束」事件:如下图所示:
JavaScript 代码如下:
$(function () { $('[data-magnify]').Magnify({ Toolbar: [ 'prev', 'next', 'rotateLeft', 'rotateRight', 'zoomIn', 'actualSize', 'zoomOut' ], keyboard:true, draggable:true, movable:true, modalSize:[800,600], beforeOpen:function (obj,data) { console.log('beforeOpen') }, opened:function (obj,data) { console.log('opened') }, beforeClose:function (obj,data) { console.log('beforeClose') }, closed:function (obj,data) { console.log('closed') }, beforeChange:function (obj,data) { console.log('beforeChange') }, changed:function (obj,data) { console.log('changed') } });})
保存模板,点击「分页预览」,效果如下图所示:
注:不支持移动端。
点击下载模板和附件:
imageTest.cpt
static.zip
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙