Vue如何内嵌tableau server报表

Ⅰ.什么是tableau：tableau是一款可视化数据分析软件，通过 server端发布报表，可以供前端页面内嵌，内嵌有两种方式，
➀tableau官方提供的js api：

 // 1.先引入API依赖文件
  <script src=公司购买的服务安装地址/javascripts/api/tableau-2.min.js> </script>

// 2.获取到tableau的票证（ticket）,拼接在url中，得到授权访问相关报表
    async load(){
      let res = await getTicket()
      if(res.meta.status == 200){
        this.ticket = res.data
      }
      let containerDiv = this.$refs.tabContain
      let url = `http://ma.itc.cmbchina.cn/trusted/${this.ticket}/views/_68/sheet0?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no`;
      let options = {
        // 是否隐藏tab栏
        hideTabs:true,
        // 设置宽高
        width：containerDiv.offsetWidth,
        height: containerDiv.offsetHeight
      }
      // 是否之前已经有tableau实例存在，若存在就销毁
      let view = this.preload;
      if(preload){
        proload.dispose()
      }
      // 第一个参数为html标签容器，第二个参数为报表链接，第三个为报表参数设置
      this.proload = new tableau.Viz(containerDiv, url, options)
    }

➁iframe嵌入的方式：

Ⅱ.如何在一个页面内嵌多个tableau报表：上面的情况都是针对内嵌一个tableau报表的情况，实际应用中遇到过需要单个页面内嵌多个报表，可以考虑如下方式。

// 1.进行tableau预加载，获取访问权限
    async preload() {
      //获取ticket
      let res = await getTicket()
      if(res.meta.status == 200){
        this.ticket = res.data
      }

      //空白视图拼上链接
      let ticketUrl = `http://ma.itc.cmbchina.cn/trusted/${this.ticket}/views/4/sheet0?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no`;
    },

// 2.监听预加载链接的变化
    watch:{
      frontUrl:{
        handler() {
          this.$refs.iframe.onload = () =>{
            //预加载完成后，获取所有报表现实
            this.urlFun() 
          }
        }
      }
    }


// 3.封装拼接url方法
    async urlFun() {
      //大小写都转换成大写，并去掉前后空格
      let projectNumber = this.projectNumber.toUpperCase().replace(/^\s+|\s+$/g, "");
      //初始化拼接数组参数
      this.projectUrls = [];
      let arr = this.arrayUrls;
      for (let i = 0; i < arr.length; i++) {
        //深拷贝,再替换之中的url
        let obj = JSON.parse(JSON.stringify(arr[i]));
        obj.url = `${obj.url}&parameter_pid=${projectNumber}`;
        this.projectUrls.push(obj);
      }
    }