如何在ShinyApp的tabPanel中嵌入完整Quarto渲染HTML文档？

核心方案：使用tags$iframe()保留Quarto原生功能 #

通过iframe可以完整嵌入Quarto渲染的HTML页面，保留左侧目录、交叉引用等所有原生交互功能，步骤如下：

1. 准备Quarto输出资源
   正常渲染你的Quarto文档，得到完整的HTML文件及配套的依赖资源（CSS、JS、图片等），将整个输出目录（或单独的HTML+依赖文件）放在Shiny项目的www目录下——Shiny会自动从该目录加载静态资源。

2. 在tabPanel中嵌入iframe
   在Shiny的UI部分，直接在tabPanel内添加iframe标签，指定HTML文件路径并设置合适的尺寸：

   tabPanel(
     "项目文档",
     tags$iframe(
       src = "doc.html",  # 对应www目录下的文件路径，若在子文件夹则写"quarto_output/doc.html"
       width = "100%",
       height = "800px",  # 可改为"100vh"让iframe占满垂直空间
       frameborder = 0    # 移除边框优化视觉效果
     )
   )
   

3. 注意事项

   • 务必保证Quarto生成的所有依赖资源（如样式表、脚本）与HTML文件同目录，否则iframe内的样式和交互会失效；
   • 如果Quarto文档使用了相对路径引用资源，渲染时需确认路径在iframe环境下仍能正常加载；
   • 若需要动态调整iframe高度，可以结合JavaScript实现，但静态高度设置对大多数场景已足够。

备选方案：actionLink跳转 #

如果iframe的适配不符合需求，可使用actionLink在新窗口打开Quarto HTML：

tabPanel(
  "项目文档",
  actionLink(
    inputId = "open_quarto_doc",
    label = "打开完整文档",
    onclick = "window.open('doc.html', '_blank')"
  )
)

该方案无需处理iframe的尺寸适配，但会跳出Shiny应用界面，属于妥协性方案。

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