如何用JavaScript导出Plotly图表为自包含HTML文件（类R的saveWidget）

嘿，我来帮你搞定这个问题！你之前的方法只提取了图表的静态DOM内容，但Plotly的交互功能（比如缩放、悬停、点击）依赖于它的JavaScript库和绑定的动态事件，直接导出innerHTML肯定会丢失这些关键功能。要实现类似R中saveWidget的自包含HTML效果，得把Plotly的脚本、图表的原始数据和配置都打包进去，下面是具体的解决方案：

这个方法会把Plotly的CDN脚本、图表容器以及重新渲染图表的代码整合到一个完整的HTML文件里，导出后无需依赖本地资源就能正常使用所有交互功能。

• 首先定义一个导出函数，它会完成以下步骤：
  1. 获取当前图表的完整数据、布局和配置
  2. 构建包含Plotly脚本和渲染逻辑的HTML模板
  3. 创建下载链接触发文件保存

function exportPlotlyToHTML(divId, filename) {
  // 获取目标图表的JSON格式数据（包含data、layout、config）
  const plotData = Plotly.toJSON(document.getElementById(divId));
  
  // 构建完整的HTML内容模板
  const htmlContent = `
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Plotly Exported Chart</title>
    <!-- 引入Plotly的CDN脚本 -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  <body>
    <!-- 图表容器 -->
    <div id="exportedPlot"></div>
    <script>
      // 使用原始数据重新渲染图表，保留所有交互功能
      Plotly.newPlot('exportedPlot', ${plotData.data}, ${plotData.layout}, ${plotData.config});
    </script>
  </body>
  </html>
  `;
  
  // 创建Blob对象并生成下载链接
  const blob = new Blob([htmlContent], { type: 'text/html' });
  const downloadUrl = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = filename || 'plotly-chart.html';
  a.click();
  
  // 释放URL对象，避免内存泄漏
  URL.revokeObjectURL(downloadUrl);
}

• 使用时只需要调用这个函数，传入你的图表容器ID和想要的文件名：

// 导出ID为myDiv的图表，保存为my-custom-plot.html
exportPlotlyToHTML('myDiv', 'my-custom-plot.html');

如果你希望导出的HTML不依赖外部CDN，可以先下载Plotly的本地脚本文件（比如plotly.min.js），然后通过fetch读取脚本内容并嵌入到HTML中：

async function exportOfflinePlotly(divId, filename) {
  const plotData = Plotly.toJSON(document.getElementById(divId));
  
  // 读取本地的Plotly脚本文件（请确保路径正确）
  const plotlyScriptContent = await fetch('./plotly.min.js')
    .then(response => response.text());
  
  const htmlContent = `
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Offline Plotly Chart</title>
    <!-- 嵌入本地Plotly脚本 -->
    <script>${plotlyScriptContent}</script>
  </head>
  <body>
    <div id="exportedPlot"></div>
    <script>
      Plotly.newPlot('exportedPlot', ${plotData.data}, ${plotData.layout}, ${plotData.config});
    </script>
  </body>
  </html>
  `;
  
  const blob = new Blob([htmlContent], { type: 'text/html' });
  const downloadUrl = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = filename || 'offline-plotly-chart.html';
  a.click();
  
  URL.revokeObjectURL(downloadUrl);
}

你之前的代码只导出了图表容器的innerHTML，这部分只是渲染后的静态DOM元素，但Plotly的交互逻辑是通过它的JavaScript库动态绑定的，而且图表的原始数据和配置并没有被包含进去。上面的方法通过重新引入Plotly库并使用原始数据重新渲染，就能完整保留所有交互功能啦。

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