如何使用JavaScript将Plotly图像保存到本地文件

Plotly的Plotly.toImage()方法返回一个Promise，会生成图表的Data URL，你可以利用这个URL创建下载链接，触发浏览器的本地保存行为，替代仅展示在页面元素的逻辑。

完整实现代码 #

// 假设gd是你的Plotly图表容器（例：document.getElementById('your-chart-id')）
Plotly.toImage(gd, {
    format: 'png',
    height: 400,
    width: 400
}).then(function(url) {
    // 创建临时下载链接
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    // 指定保存的文件名
    downloadLink.download = 'plotly-chart.png';
    // 触发浏览器下载行为
    downloadLink.click();
    // 清理临时元素
    downloadLink.remove();
}).catch(function(error) {
    console.error('图表保存失败:', error);
});

关键细节说明 #

• Plotly.toImage()的Promise会在图片生成完成后返回对应格式的Data URL，我们在then回调里处理下载流程。
• <a>元素的download属性是核心：它会让浏览器将链接资源保存为指定文件名，而非直接打开。
• 若需要其他格式，只需修改format参数（支持jpeg、svg、webp等），同时同步调整download的文件名后缀即可。

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