问题描述:
最近做项目时有需要把Tableau的视图嵌入程序的需求
解决过程:
于是就网上各种查看文档,都没有现成的代码可以使用,一开始是希望可以直接把tableau视图嵌入小程序,由于Tableaue的JSAPI不支持小程序的源生态代码,只能考虑在小程序创建一个Web来装Tableau视图,只需要把Teableau视图做成网页就行,那么问题就转变成了将TableauServer嵌入Web的问题。
要想使用嵌入Web需要使用TableauServer的服务版,也就是TableauServer,而不能使用Tableau桌面版,TableauServer装好后打开的本地服务,相当就是架了一个Web服务器,你可以在上面制作视图,像使用桌面版一样,Server板的好处是可以通过分享,直接通过网页就可以访问,方便分享,这也是解决我的问题的可用方法,但这里TableauServer的视图都是需要有帐号才能访问,这显然是不行的,在嵌入小程序后不可能让用户输入帐号密码这些。后来终于找到了不用输入直接访问的方法。请看以下过程。
第一步:先下载安装TableauServer
TableauServer2018 下载地址,该地址还有安装教程
https://www.jb51.net/softs/614435.html
也可以到官方下载,安装过程略有不同
https://www.tableau.com/zh-cn/support/releases/server/2020.2.3
如果你安装成功并创建成功后会得如下界面则表示安装成功,那么可以进行下一步。
第二步:在Web服务器编写代码生成密钥用于免登陆访问视图
1.在TableauServer上添加受信任的IP地址,否则密钥会创建不成功,具体参考以下文章。
https://blog.csdn.net/read_you2011/article/details/81476108
2.生成密钥代码参考以下文章
https://www.jianshu.com/p/e3139e77043e
密钥生成的Web服务器代码如下:
private String index(){ //tableau server服务器地址 final String wgserver = "192.168.2.104"; //Tableau Server 许可用户的用户名 final String tableAuUser = "xxxxxxx"; String ticket; String tickUrl = "test"; try { ticket = getTrustedTicket(wgserver, tableAuUser); //这里如果服务器没有添加受信用的IP就会返回-1,一定要注意 if ( !ticket.equals("-1") ) { tickUrl = "http://" + wgserver + "/trusted/" + ticket + "/"; } } catch (ServletException e) { //("获取tableau ticket 失败。 ",e); } return tickUrl; } //获取票证逻辑 private static String getTrustedTicket(String wgserver, String user) throws ServletException { OutputStreamWriter out = null; BufferedReader in = null; try { StringBuilder reqUrl = new StringBuilder(); reqUrl.append(URLEncoder.encode("username", "UTF-8")); reqUrl.append("="); reqUrl.append(URLEncoder.encode(user, "UTF-8")); URL url = new URL("http://" + wgserver + "/trusted"); URLConnection conn = url.openConnection(); conn.setDoOutput(true); out = new OutputStreamWriter(conn.getOutputStream()); out.write(reqUrl.toString()); out.flush(); StringBuilder rsp = new StringBuilder(); in = new BufferedReader( new InputStreamReader(conn.getInputStream())); String line; while ((line = in.readLine()) != null) { rsp.append(line); } return rsp.toString(); } catch (Exception e) { throw new ServletException(e); } finally { try { if (in != null) in.close(); if (out != null) out.close(); } catch (IOException e) { } } }
密钥生成成功后是类似这样子的:
http://192.168.2.104/trusted/4-kSAE1lQcqtHbuGmM-i9Q==:uC58WptDXrlMbNI93WC1G3ZM/3.编写Html页面
在这里踩了很多坑,参考文章里的代码不知道是对应那个版本的Tableauserver,直接拿过来是不能用的,官方也找来的也是最新版本的示例代码,对于我下载安装的2018版的服务器也不能用,最后是服务器的视图有个分享功能,能生成嵌入代码,以下代码是根据分享生成的嵌入代码修改得来。那么对于不同版本的tableauServer都可以用该方法来处理,使用分享功能得到嵌入代码来修改,就能完成不同版本的嵌入代码的编写。
<!DOCTYPE html> <html lang="zh-CN"> <script type='text/javascript' src='http://localhost/javascripts/api/viz_v1.js'></script>
<body> <div class='tableauPlaceholder' style='width: 1278px; height: 1200px;'> <object class='tableauViz' width='1278' height='1200' style='display:none;'> <param name='host_url' value='http://192.168.2.104/trusted/4-kSAE1lQcqtHbuGmM-i9Q==:uC58WptDXrlMbNI93WC1G3ZM/' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /> <param name='name' value='Regional/Obesity' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /> <param name='showAppBanner' value='false' /> <param name='filter' value='iframeSizedToWindow=true' /> </object> </div> </body> </html>
最后来一张不需要登陆验证就可以访问的视图页面
文章分享,希望也是想接入Tableau视图的程序能看到,里面有写得不好的请多指教