此代码适用的场景是一个页面有多个数据图表。

首先需要拿到你生成数据图表的数据， 然后赋值给一个数组，数组需要在data定义，还需要去重。

               // 检查是否有相同的parameter值const hasDuplicate = this.toImageArr.some(iiem => iiem.parameter === element.parameter);// 如果没有重复，则添加到数组if (!hasDuplicate) {this.toImageArr.push(element);}

 然后点击导出按钮的代码如下：

   // 导出图表为图片exportExcel() {const uniqueImageNames = new Set(this.toImageArr);for (const image of this.toImageArr) {const imageName = image.parameter;if (uniqueImageNames.has(imageName)) {continue;}Plotly.toImage(`id${imageName}`, { format: 'png', width: 1600, height: 1000 }).then(function (url) {// 创建一个虚拟的下载链接const link = document.createElement('a');link.href = url;link.download = `${imageName}.png`; //imageName图片名称，根据自己需求修改link.style.display = 'none';// 将下载链接添加到页面中并触发点击事件document.body.appendChild(link);link.click();// 清理下载链接document.body.removeChild(link);uniqueImageNames.add(imageName);}).catch(function (error) {console.log('Error exporting chart:', error);});}}

单个下载可以点击数据图表的照相机，可以实现单个下载。

如果数据图表做了分页和懒加载,无法获取第二页数据图表的dom, 使用以下代码:

exportExcel() {const uniqueImageNames = new Set();const promises = this.toImageArr.map((image) => {const imageName = image.parameter;if (uniqueImageNames.has(imageName)) {return Promise.resolve();}return Plotly.toImage(`id${imageName}`, { format: 'png', width: 1600, height: 1000 }).then(function (url) {const link = document.createElement('a');link.href = url;link.download = `${imageName}.png`;link.style.display = 'none';document.body.appendChild(link);link.click();document.body.removeChild(link);uniqueImageNames.add(imageName);}).catch(function (error) {console.log('Error exporting chart:', error);});});Promise.all(promises).then(() => {console.log('All charts exported successfully');}).catch((error) => {console.log('Error exporting charts:', error);});
}

好用的话点赞支持一下，谢谢