kabudada
2022-06-17 11:46
采纳率: 50%
浏览 19

如何将Tabelau嵌入React前端页面中

问题遇到的现象和发生背景

如何将Tabelau嵌入React前端页面中

问题相关代码,请勿粘贴截图

在网上找到相关嵌入代码后,在react中使用。

import { useEffect } from 'react';
import tableau from 'tableau-api';

interface IIframe {
  url: string;
  name: string;
  width?: string;
  height?: string;
  frameBorder?: string | undefined;
  iframeWidth?: string;
  iframeHeight?: string;
}

const IframeContent = (props: IIframe) => {
  const { url, name, width, height, frameBorder, iframeWidth, iframeHeight } = props;
  const initializeViz = () => {
    var placeholderDiv = document.getElementById('tableauViz');
    var url =
      '报表生成的访问url';
    var options = {
      width: placeholderDiv?.offsetWidth,
      height: placeholderDiv?.offsetHeight,
      hideTabs: true,
      hideToolbar: true,
      onFirstInteractive: function () {
        // workbook = viz?.getWorkbook();
        // activeSheet = workbook?.getActiveSheet();
      },
    };
    const viz = new tableau.Viz(placeholderDiv, url, options);
  };
  useEffect(() => {
    initializeViz();
  }, []);
  return (
    <>

      <div style={{ width, height }}>
        <div id="tableauViz"></div>
      </div>
    </>
  );
};

export default IframeContent;


运行结果及报错内容

img

我的解答思路和尝试过的方法
我想要达到的结果

如何修改才能让访问链接正确展示在页面中,并且后续还可以做权限相关的开发

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

相关推荐 更多相似问题