如何通过编程方式将Bokeh JS中的图表保存为PNG格式

Bokeh官方文档给出了Python环境下的导出示例：

from bokeh.io import export_png

export_png(plot, filename="plot.png")

目前JavaScript环境下暂无官方直接提供的编程式保存绘图的公开示例，对应常见业务场景为后端生成绘图后，嵌入自动生成的报告中使用，以下是可落地的可行方案：

方案1：直接读取渲染后的Canvas导出 #

Bokeh JS的绘图最终会渲染为HTML Canvas元素，只要在绘图完全渲染完成后获取对应Canvas节点，即可直接导出PNG数据：

• 绑定Bokeh的渲染完成回调，避免导出空白画布
• 调用Canvas原生的toDataURL('image/png')方法获取PNG格式的base64编码
• 将base64编码转码后即可写入本地文件、直接嵌入报告或返回给调用方
  参考实现代码：

const fs = require('fs');
// 嵌入绘图到容器后等待渲染完成
Bokeh.embed.embed_item(plotConfig, '#plot-target').then(() => {
  // 定位Bokeh生成的画布元素
  const plotCanvas = document.querySelector('#plot-target canvas.bk-canvas');
  // 获取PNG的base64数据
  const pngData = plotCanvas.toDataURL('image/png').replace(/^data:image\/png;base64,/, '');
  // 写入本地文件
  fs.writeFileSync('output_plot.png', pngData, 'base64');
});

如果是纯Node后端环境，搭配jsdom和node-canvas提供DOM和Canvas上下文即可直接运行上述逻辑，不需要额外依赖完整浏览器环境。

方案2：无头浏览器截图导出 #

如果遇到复杂自定义组件、特殊渲染效果的兼容问题，可以使用无头浏览器方案，这也是Bokeh Python版export_png的底层实现逻辑：

• 先将Bokeh绘图生成独立的HTML页面
• 启动无头浏览器加载该页面，等待绘图和所有关联资源（字体、外部图片等）加载完成
• 调用无头浏览器的区域截图API，框选绘图所在的DOM节点区域，直接保存为PNG文件
  这个方案兼容性最高，不需要适配Bokeh的内部渲染逻辑，适合复杂绘图的导出场景。

注意事项 #

• 所有导出操作必须在绘图完全渲染、所有外部资源加载完成后触发，否则会出现空白、样式错乱、资源缺失的问题
• 如果绘图使用了第三方自定义组件，需要确保导出环境中已经正确加载对应组件的依赖资源

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