如何在Django模板中正确嵌入Tableau视图？

这个问题的核心原因很明确：当你直接访问Tableau的URL时，页面里的JS、CSS等资源都是相对路径，浏览器会自动以Tableau服务器地址为基础去请求这些资源；但当你把这段HTML嵌入Django模板后，浏览器当前的页面域名是你的Django站点，所以所有相对路径都会指向Django服务器，自然找不到Tableau的资源。

下面是三种可行的解决方法，按实现复杂度和维护成本排序：

方法1：使用iframe嵌入（最推荐） #

这是最简单也最可靠的方法，不用处理HTML解析和路径修改，直接让浏览器通过iframe加载Tableau的完整URL。所有资源请求都会从iframe内部发向Tableau服务器，完全避免路径冲突。

修改视图代码： #

def index(request):
    url = os.environ.get("tableau_HOST")
    username = request.user.username
    ticket = get_tableau_ticket(url, username)
    
    if not ticket:
        # 这里可以添加错误处理逻辑，比如返回错误页面
        return render(request, "tableau/error.html")
    
    # 生成带ticket的完整Tableau视图URL
    tableau_view_url = f"{url}{ticket}/views/SIPPlan/DashboardView?username={username}"
    
    return render(
        request,
        "tableau/index.html",
        {"tableau_view_url": tableau_view_url},
    )

修改模板代码： #

{% extends "myapp/base_template.html" %}
{% load static %}
{% block content %}
    <!-- 可以根据需求调整iframe的宽高、边框等属性 -->
    <iframe 
        src="{{ tableau_view_url }}" 
        width="100%" 
        height="800px" 
        frameborder="0"
        allowfullscreen>
    </iframe>
{% endblock %}

优点：实现简单，Tableau的所有交互功能（筛选、钻取等）都能正常工作，不用关心Tableau版本更新带来的路径变化。

方法2：修改HTML中的资源路径 #

如果你不想用iframe，可以解析返回的Tableau HTML，把所有相对路径的资源前面加上Tableau服务器的基础URL。这里可以用BeautifulSoup库来处理HTML解析。

步骤1：安装BeautifulSoup #

先确保你的环境里安装了这个库：

pip install beautifulsoup4

修改视图代码： #

from bs4 import BeautifulSoup
import requests

def index(request):
    url = os.environ.get("tableau_HOST")
    username = request.user.username
    ticket = get_tableau_ticket(url, username)
    tableau_data = ""
    
    if ticket:
        response = requests.get(
            f"{url}{ticket}/views/SIPPlan/DashboardView",
            params={'username': username}
        )
        soup = BeautifulSoup(response.text, 'html.parser')
        
        # 修改所有带src属性的标签（img、script等）
        for tag in soup.find_all(src=True):
            if tag['src'].startswith('/'):
                tag['src'] = f"{url}{tag['src'][1:]}"
        
        # 修改所有带href属性的标签（link、a等）
        for tag in soup.find_all(href=True):
            if tag['href'].startswith('/'):
                tag['href'] = f"{url}{tag['href'][1:]}"
        
        tableau_data = str(soup)
    else:
        # 错误处理逻辑
        pass
    
    return render(
        request,
        "tableau/index.html",
        {"tableau_data": tableau_data},
    )

注意：这种方法需要维护解析规则，如果Tableau更新了页面结构或者资源路径格式，可能需要调整代码。

方法3：添加标签 #

在返回的Tableau HTML头部添加<base>标签，指定所有相对路径的基础URL为Tableau服务器地址。这样浏览器会自动把所有相对路径解析成Tableau的资源地址。

修改视图代码： #

from bs4 import BeautifulSoup
import requests

def index(request):
    url = os.environ.get("tableau_HOST")
    username = request.user.username
    ticket = get_tableau_ticket(url, username)
    tableau_data = ""
    
    if ticket:
        response = requests.get(
            f"{url}{ticket}/views/SIPPlan/DashboardView",
            params={'username': username}
        )
        soup = BeautifulSoup(response.text, 'html.parser')
        
        # 创建base标签，指定Tableau服务器地址为基础路径
        base_tag = soup.new_tag('base', href=url)
        # 把base标签插入到<head>的最前面
        if soup.head:
            soup.head.insert(0, base_tag)
        
        tableau_data = str(soup)
    else:
        # 错误处理逻辑
        pass
    
    return render(
        request,
        "tableau/index.html",
        {"tableau_data": tableau_data},
    )

注意：<base>标签会作用于整个页面的所有相对路径，包括Django模板里的静态资源（比如你自己的CSS、JS）。所以如果你的模板里有其他相对路径的资源，可能会被错误地指向Tableau服务器，需要把这些资源改成绝对路径或者调整base标签的作用范围。

内容的提问来源于stack exchange，提问作者Hanny