Server端用了Spring，其實無所謂的。
public class MobilController {
@RequestMapping(value="/openMobileReport")
public ModelAndView openMobileReport(HttpServletRequest request,HttpServletResponse response)
{
ModelAndView modelAndView = new ModelAndView();
try
{
String queryReportID=(String)request.getParameter("reportID");
if(queryReportID!=null && !queryReportID.equals(""))
{
AccessDB db=new AccessDB();
String sql="select * from {0}_reports where ID={1}";
ResultSet rs = db.querydb(sql,queryReportID);
if(rs.next())
{
String views=rs.getString("activeViewUrl").replaceAll("sheets/","");
//獲取用戶的報表服務器映射用戶
Config setup =new Config();
String tUserName="";
tUserName=setup.getProperty("SERVERUSER");
//嘗試登陸Tableau服務器，獲取令牌
if(!tUserName.equals(""))
{
String serverHost="http://"+setup.getProperty("SERVERHOST")+":"+setup.getProperty("SERVERPORTAL");
String token=null;
//是否使用SSL證書方式登錄
String ssl=setup.getProperty("TABLEAUUSEDSSL");
if(ssl!=null && !ssl.equals(""))
{
if(Boolean.parseBoolean(ssl))
{
serverHost="https://"+setup.getProperty("SERVERHOST")+":"+setup.getProperty("SERVERPORTAL");
token=HttpRequest.sendSSLPost(serverHost+"/trusted","username="+tUserName);
}
else
{
token=HttpRequest.sendPost(serverHost+"/trusted","username="+tUserName);
}
}
else
{
token=HttpRequest.sendPost(serverHost+"/trusted","username="+tUserName);
}
if(token!=null && !token.equals("") && !token.equals("-1"))
{
sql=db.sqlList.getProperty("change_report_view_status");
db.updatedb(sql,queryReportID);
String url=serverHost+"/trusted/"+token+"/views/"+views;
modelAndView = new ModelAndView("openMobileReport");
modelAndView.addObject("SYSTEMNAME", setup.getProperty("SYSTEMNAME"));
modelAndView.addObject("url",url);
modelAndView.addObject("token",token);
modelAndView.addObject("views",views);
modelAndView.addObject("serverHost", serverHost);
modelAndView.addObject("reportName", rs.getString("reportname"));
modelAndView.addObject("createDate", rs.getDate("createDate"));
modelAndView.addObject("num", rs.getInt("num"));
modelAndView.addObject("description", rs.getString("description"));
}
else
{
modelAndView = new ModelAndView("error");
modelAndView.addObject("message","當前站點不受服務器信任，請添加站點到Tableau授信服務器列表.");
}
}
else
{
modelAndView = new ModelAndView("error");
modelAndView.addObject("message","用戶權限不足，無法登陸報表系統，請諮詢管理員添加報表服務器權限.");
}
}
else
{
modelAndView = new ModelAndView("error");
modelAndView.addObject("message","沒有找到目標報表，它可能已經被刪除.");
}
rs.close();
db.close();
}
else
{
modelAndView = new ModelAndView("error");
modelAndView.addObject("message","參數錯誤，請循正式路徑訪問。");
}
}
catch(Exception ex)
{
modelAndView = new ModelAndView("error");
modelAndView.addObject("message","加載頁面錯誤："+ex.getMessage());
}
return modelAndView;
}
}
openSmallProgramReport.jsp代碼，其實也無所謂。
<%@ page contentType="text/html; charset=utf-8" language="java" errorPage="" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<meta name='360-fullscreen' content='true' />
<title>${SYSTEMNAME}</title>
<link rel="stylesheet" type="text/css" href="css/themes/customer/easyui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
<script type='text/javascript' src="${serverHost}/javascripts/api/tableau-2.min.js"></script>
<script type='text/javascript' src="js/openSmallProgramReport.js"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true,border:false" style="overflow:auto;background-color:rgba(255,255,255,0.9);">
<div style="display:block; background-color:#FFF;color:#666;font-size:0.8rem; padding:10px">
上傳時間：${createDate} 點擊${num}次
</div>
<div style="display:block;background-color:#FFF;color:#666;font-size:0.8rem; padding:10px">
${description}
<input type="hidden" name="url" id="url" value="${url}">
</div>
<div id="reportContainer" >
</div>
</div>
</body>
</html>
這個文件用了Jquery easy UI框架，主要是用一個隱藏的input保存一下Tableau的有效訪問地址（帶有token）。然後寫一個openSmallProgramReport.js
var viz=null;
$(document).ready(function ()
{
try
{
var containerDiv = document.getElementById("reportContainer");
var options = {
hideTabs: true,
hideToolbar: true,
toolbarPosition:'TOP',
device:'phone'
};
if (viz) {viz.dispose();}
viz = new tableau.Viz(containerDiv, $('#url').val()+"?:embed=yes", options);
}
catch(e)
{
alert("初始化報表出錯："+e.message);
}
});
使用URL生成報表對象。
小程序部分就很簡單了，加一個web-view就行了。
<web-view src="{{reportServer}}/openSmallProgramReport?reportID={{reportID}}">
</web-view>
效果：
先列表，然後點擊展示報表。