HTML实现超链按钮效果

1.1 預期效果

當新增超級連結時，超連結總是呈藍色字體顯示，但有時使用者希望超連結能以按鈕的方式顯示，如下圖所示：

1.2 實現思路

透過新增 HTML </button> 標籤，使用 HTML 方式顯示儲存格內容。

2.1 報表設計

建立普通報表，在 A1 儲存格輸入文字：點選，並置中顯示。

2.2 新增超級連結

選中 A1 儲存格，點選右側「超級連結」，新增一個「網路報表」。具體設定如下圖所示：

2.3 儲存格屬性設定

1）選中 A1 儲存格，點選「儲存格屬性>形態」，選擇「公式形態」，輸入公式："<button type='button' style='background-color:#47a8ea;border-style:none;border-radius:3px;cursor:pointer;width:100%;height:20px;color:white;'>"+$$$+"</button>"

2）點選「儲存格屬性>其他」，設定顯示內容為「用HTML顯示內容」。

2.4 效果預覽

2.4.1 PC 端

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

2.4.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

注：本例設定了「範本>行動端屬性」自適應屬性為「不自適應」。

已完成範本可參見：%FR_HOME%\webroot\WEB-INF\reportlets\doc\Primary\HTML實現超連結按鈕效果.cpt

點選下載範本：HTML实现超链接按钮效果.cpt