web 報表工具如何自適應

現在的報表使用者已經不再將報表作為一個單純的報表工具看待了，有時候也會當作頁面工具來使用，這時為了頁面顯示工整美觀，就需要報表能夠自適應寬度。下面我們就基於潤乾報表來講一下是如何做到自適應展現報表。

產品：潤乾報表 V2018

方法 1：使用自帶的 matchReport.jsp 訪問報表，這個頁面透過 reportMatchSize 這個自適應 js 函式實現自適應功能。

1、 新建報表（過程不再詳細說明）

將報表儲存在安裝目錄的 report\web\webapps\demo\WEB-INF\reportFiles 下面。

2、 啟動服務，訪問報表

訪問報表的連線為： ：埠 /demo/reportJsp/matchReport.jsp?rpx= 報表名稱.rpx （如果報表儲存在 reportFiles 的下級資料夾中，訪問報表的 url 需要改為：……rpx= 資料夾名稱 / 報表名稱.rpx）

3、 報表在 PC 端的展現效果：

透過上面的展現效果可以看出，使用自帶的 matchReport.jsp 訪問報表，在自適應寬度的時候高度也同比例縮放了。如果我們不想要這種寬度自適應，高度同比例縮放的效果，我們可以試試下面這種方式。

方法 2：潤乾報表在網頁端展示時是以純 html 形式展現，所以可以透過頁面對展現的報表進行控制。

在展現頁面的 showReport.jsp 新增到以下 js：

<script language="javascript">
 myResize();
 function myResize() {
 var tab1 = document.getElementById("report1");
 tab1.style.width=document.body.clientWidth;//  網頁可見區域寬
 }
  window.onload=myResize;
 window.onresize=myResize;
</script><script language="javascript">
 myResize(); function myResize() { var tab1 = document.getElementById("report1");
 tab1.style.width=document.body.clientWidth;//  網頁可見區域寬
 }  window.onload=myResize; window.onresize=myResize;</script>

PC 端展現效果：

小提示：

1、潤乾報表自帶 mode  自適應方式，有以下 8 種取值，可直接修改 matcvhReport.jsp 裡面的 mode 屬性：

2、matchReport.jsp 自適應方式也適用於手機端，在手機瀏覽器輸入訪問報表的 URL 即可。具體可參考文章：*