vue2 若依项目，使用plotly.js-dist图表库，将数据图表一键导出为图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2 若依项目，使用plotly.js-dist图表库，将数据图表一键导出为图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

首先需要拿到你生成数据图表的数据，然后赋值给一个数组，数组需要在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);
                    });
            }
        }

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

vue2 若依项目，使用plotly.js-dist图表库，将数据图表一键导出为图片,javascript,plotly,前端

如果数据图表做了分页和懒加载,无法获取第二页数据图表的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);
    });
}

好用的话点赞支持一下，谢谢文章来源地址https://www.toymoban.com/news/detail-525150.html

到了这里，关于vue2 若依项目，使用plotly.js-dist图表库，将数据图表一键导出为图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！