如何在Nuxt/Vue组件中加载Django生成的Bokeh HTML文件内容

方案一：使用iframe嵌套完整HTML（推荐，无依赖冲突） #

该方案无需处理依赖冲突和script标签报错问题，直接隔离Bokeh运行环境，实现成本最低。

<template>
  <div>
    <h1>Some content here</h1>
    <!-- src填写后端生成的HTML文件地址，或存储在项目静态目录的本地路径 -->
    <iframe 
      src="/path/to/your/generated/bokeh.html" 
      width="100%" 
      height="800px" 
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

方案二：动态渲染HTML片段+提前加载Bokeh依赖 #

如果不想使用iframe，可以按以下步骤实现：

第一步：后端输出改造 #

调整Django生成逻辑，仅返回Bokeh渲染所需的纯DOM结构，剥离HTML中所有<script>标签，同时单独返回Bokeh渲染所需的JSON配置数据。

第二步：正确配置Bokeh依赖 #

之前出现Bokeh is undefined报错，通常是Nuxt SSR模式下服务端无window对象、或CDN异步加载未完成就调用Bokeh导致的，按以下方式配置即可解决：
在nuxt.config.js中配置Bokeh依赖仅在客户端加载：

export default {
  head: {
    script: [
      {
        src: "对应你后端Bokeh版本的官方CDN地址",
        mode: "client"
      }
    ]
  }
}

注：前端Bokeh依赖版本必须和后端Django安装的Bokeh版本完全一致，否则会出现渲染异常

第三步：组件内实现渲染逻辑 #

<template>
  <div>
    <h1>Some content here</h1>
    <!-- client-only避免SSR阶段报错 -->
    <client-only>
      <div ref="bokehContainer" v-html="bokehHtml"></div>
    </client-only>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bokehHtml: ''
    }
  },
  async mounted() {
    // 等待Bokeh加载完成
    await this.waitForBokeh()
    // 请求后端返回的DOM结构
    const htmlRes = await fetch('/api/your-bokeh-html-api')
    this.bokehHtml = await htmlRes.text()
    // 请求后端返回的Bokeh渲染配置JSON
    const configRes = await fetch('/api/your-bokeh-config-api')
    const bokehConfig = await configRes.json()
    // 执行Bokeh渲染
    Bokeh.embed.embed_items(bokehConfig)
  },
  methods: {
    // 轮询检测Bokeh是否加载完成
    waitForBokeh() {
      return new Promise(resolve => {
        if (window.Bokeh) return resolve(window.Bokeh)
        const timer = setInterval(() => {
          if (window.Bokeh) {
            clearInterval(timer)
            resolve(window.Bokeh)
          }
        }, 100)
      })
    }
  }
}
</script>

注意事项 #

• 不要直接将包含<script>标签的完整HTML通过v-html渲染，Vue不会执行v-html内的脚本，同时存在XSS安全风险

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