JS實現點擊單元格彈框展示可旋轉圖片

1.1 問題描述

Finereport 中 toimage 函數展示的圖片不能旋轉，當需求是點擊單元格能彈框展示圖片并可旋轉、放大，彈框可拖拽等，要如何實現呢？如下圖所示：

1.2 解決思路

單元格圖片 HTML 顯示 ，f引入外部 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 效果預覽

保存模板，點擊「分頁預覽」，效果如下圖所示：

注：不支持移動端。

點擊下載模板和附件：

imageTest.cpt

static.zip