Tableau Server 嵌入 Web 详解

tech2025-01-22  0

问题描述:

最近做项目时有需要把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&#47;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视图的程序能看到,里面有写得不好的请多指教

最新回复(0)