Vue导出word附带eCharts图表(承接上一篇Vue纯前端导出word)

最新推荐文章于 2024-07-24 10:40:47 发布

永不满足的求知者

最新推荐文章于 2024-07-24 10:40:47 发布

阅读量870

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41154522/article/details/118727497

版权

Vue 专栏收录该内容

64 篇文章 3 订阅

订阅专栏

本文介绍了如何使用Vue框架配合ECharts生成图表，并将这些图表转换为Base64图片，以便于插入Word文档。通过遍历DOM元素，针对以'columnChart'开头的图表进行处理，最终实现图表的导出功能。

摘要由CSDN通过智能技术生成

Vue纯前端导出word直通车

1. 获取ECharts图的dom

let dom = document.querySelector(".outline .main .content");

2. 获取base64图片数据

页面中所有的echarts图的标签id均为 columnChart开头

dom.children.forEach(item => {
    if (item.id && item.id.indexOf("columnChart") > -1) {
        let columnChart = this.$echarts.init(item);
        let baseUrl = columnChart.getDataURL({
            pixelRatio: 2
        });
        str += `<div align="center" style="text-align:center;width:100%"><img src="${baseUrl}" width="623" height="300" /></div>`;
    } else {
        str += item.outerHTML;
    }
})