我尝试在我的网页上显示 Tableau 工作簿,但结果是空白页

I'm trying to display Tableau workbooks on my webpage, but the result is blank page

我的网站是Laravel-VueJs App,我设法在后台自动登录Tableau服务器,(但没有获得授权票(我不确定我是否需要[=23的票=] API yet), 我试图在我的网页上显示我的工作簿但是得到空白页面没有任何错误,但这是我的代码

首先在我的app.blade.php

中添加了JavascriptAPI
<script type="text/javascript" src="https://my-server-url/javascripts/api/tableau-2.8.0.min.js"></script>

这是我需要显示工作簿的 Vue 组件

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

export default {
  name: "TableauWorkbookShow",
  props: {
    url: {
      type: String, 
      required: true,
    },
  },
  mounted(){
      this.initViz();

  },
  methods: {
    initViz() {
// url looks something like this: https://my-server-url/#/site/my-site-name/views/workbook-name/view-name
    var viz = new tableau.Viz(this.$refs.tableau, this.url);
    }
  }
};
</script>

没有错误,页面上也没有信息,还有什么我需要在这里考虑的吗?我应该将 Auth 票证添加到 url 以获取工作簿还是 url 现在可以正常工作了?

一种测试方法是直接使用服务器上工作簿中的嵌入代码。

点击分享

然后点击复制嵌入代码。

将此代码直接粘贴到您的 html/view 中。它应该包含将您的仪表板填充到网页中的所有内容。

如果这有效,您就知道您的整体身份验证有效,您可以解决您的 js 与嵌入代码的差异。

如果身份验证不起作用,如果您的 js/html 工作正常,您应该仍会看到此屏幕。