【Tableau】之URL_ACTION事件

vue项目中嵌入tableau可视化报表 之点击报表中的链接

<template>
  <div id="vizContainer" ref="vizContainer" style="width:800px; height:700px;"></div>
</template>

<script>
  import 'tableau'
  export default {
    data() {
      return {
        viz: null
      }
    },
    create() {
      this.initViz()
    },
    methods: {
      initViz() {
        let options = {
          hideTabs: true,
          hideToolbar: true,
          disableUrlActionsPopups: true,
          onFirstInteractive: () => {
            // 添加URL_ACTION事件
            this.viz.addEventListener(
              tableau.TableauEventName.URL_ACTION,
              this.urlActionEventHandler
            )
          }
        }

        let vizContainer = document.getElementById("vizContainer")
        // let vizContainer = this.$refs.vizContainer
        let url = "https://YOUR-SERVER/views/YOUR-VISUALIZATION"
        // 或者url从后端获取

        this.viz = new tableau.Viz(vizContainer, url, options)
        // 创建一个viz对象并嵌入到div中
      },

      urlActionEventHandler(event) {
        console.log("URL: ", event.getUrl())
        // 得到url字符串
        console.log('Target: ', event.getTarget())
        // 得到一串标识符，类似这样:  _598854375796357263
      }
    }

  }
</script>