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 效果預覽

儲存範本，點選「分頁預覽」，效果如下圖所示：

注：不支援行動端。

點選下載範本和附件：

imageTest.cpt

static.zip