微信小程序集成Tableau报表

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}&nbsp;&nbsp;点击${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>

效果：

先列表，然后点击展示报表。

PS at 2020-05-01：然后我又去试了试钉钉小程序，真是抄的稀烂。

おすすめ