JS实现点击单元格弹框展示可旋转图片

1.1 问题描述

Finereport 中 toimage 函数展示的图片不能旋转，当需求是点击单元格能弹框展示图片并可旋转、放大，弹框可拖拽等，要如何实现呢？如下图所示：

1.2 解决思路

单元格图片 HTML 显示 ，引入外部 JS 和 CSS 文件。

2.1 准备文件

准备需要的 JS 文件和 CSS 文件，见下面压缩包，解压后放置在%FR_HOME%\webapps\webroot\目录下。如下图所示：

点击可下载：static.zip

2.2 准备模板

新建模板，在 A2 单元格中添加图片地址，B2 单元格中选择「插入公式」输入 HTML 代码，选择单元格显示方式为「用HTML显示内容」。如下图所示：

HTML 代码如下：

'<a href="javascript:void(0)" data-magnify="gallery2" data-group="g2" data-src="' + a2 + '" data-caption="测试图片"> 点击查看 </a>'

2.3 引入文件

1）点击菜单栏「模板>模板Web属性>引用css」,引用放置在 webroot 目录下的 css 文件。如下图所示：

2）点击菜单栏「模板>模板Web属性>引用JavaScript」,引用放置在 webroot 目录下的 JS文件。如下图所示：

2.4 添加事件

点击菜单栏「模板>模板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')
		}
	});

})

2.5 效果预览

保存模板，点击「分页预览」，效果如下图所示：

注：不支持移动端。

点击下载模板和附件：

static.zip

imageTest.cpt