echarts图表导出图形以及数据到Excel

echarts图表导出图形以及数据到Excel

• 应用插件

应用插件

npm install exceljs file-saver -S

导入

import Excel from "exceljs";
import * as FileSaver from "file-saver";//用于客户端读写数据

使用示例
HTML标签

<button type="success" @click="exportChartToExcel">导出</button>

js代码

exportChartToExcel(row) {
            // 获取Echarts图形实例
            console.log(this.$refs.chartchart.chart)
            // const chartInstance = this.$refs.chart.echartsInstance();
            // 获取Echarts图形数据
            const chartData = this.$refs.chartchart.chart.getDataURL({
                type: 'png',
                pixelRatio: 2,
                backgroundColor: '#fff'
            });
            const EXCEL_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
            // 创建工作簿
            let workbook = new Excel.Workbook();
            // 设置工作簿的属性
            workbook.creator = "Me";
            workbook.lastModifiedBy = "Her";
            workbook.created = new Date(1985, 8, 30);
            workbook.modified = new Date();
            workbook.lastPrinted = new Date();
            // 工作簿视图，工作簿视图控制在查看工作簿时 Excel 将打开多少个单独的窗口
            workbook.views = [
                {
                    x: 0,
                    y: 0,
                    width: 1000,
                    height: 2000,
                    firstSheet: 0,
                    activeTab: 1,
                    visibility: "visible",
                },
            ];
            // 
            let worksheet = workbook.addWorksheet("sheet1");
            const imgArr = [chartData]

            // 通过 base64  将图像添加到工作簿
            imgArr.forEach((item, index) => {
                // 通过 base64  将图像添加到工作簿
                const imageId1 = workbook.addImage({
                    base64: item,
                    extension: "png",// 图片扩展名，支持“jpeg”，“png”，“gif”
                });
                // 在一定范围内添加图片
                worksheet.addImage(
                    imageId1,
                    `${String.fromCharCode(65 + index * 6)}1:${String.fromCharCode(
                        70 + index * 6
                    )}16`
                );
            });
            const heardWXD = {
                enterpriseName0:'区(市)县',
                enterpriseName1:'已回复危险区',
                enterpriseName2:'未回复危险区',
            };
            
            const tableData =  [];
            var listHearder = []
            listHearder = Object.keys(heardWXD);
            console.log(listHearder)
            // 按行的格式插入表头
            worksheet.insertRow(
                17,// 行的位置
                listHearder.map((item) => heardWXD[item])
            );
            console.log(this.noReplyList, 'this.noReplyList')
			// [
		    //     {
			//         "dangerName": "危险点测试0722-1655",
			//         "dataList": [
			//             {
			//                 "name": "笑凌",
			//                 "phone": "",
			//                 "isDuty": 0,
			//                 "isRead": 0
			//             },
			//             {
			//                 "name": "张浩",
			//                 "phone": "",
			//                 "isDuty": 0,
			//                 "isRead": 0
			//             },
			//             {
			//                 "name": "志伟",
			//                 "phone": "",
			//                "isDuty": 0,
			//                 "isRead": 0
			//             }
			//         ]
			//     }
			// ]        
            console.log(this.replyList, 'this.replyList')
            // 如果已回复条数大于未回复条数,则以已回复为基准
            if (this.replyList.length > this.noReplyList.length) {
                this.replyList.forEach((item, index) => {
                    if (this.noReplyList[index]) {
                        tableData.push({
                            enterpriseName0: ' ',
                            enterpriseName1: item.dangerName ? item.dangerName : ' ',
                            enterpriseName2: this.noReplyList[index].dangerName ? this.noReplyList[index].dangerName : ' '  
                        })
                    } else {
                        tableData.push({
                            enterpriseName0: ' ',
                            enterpriseName1: item.dangerName ? item.dangerName : ' ',
                            enterpriseName2: ' ' 
                        })
                    }
                })
                
            } else if (this.replyList.length < this.noReplyList.length) {
                this.noReplyList.forEach((data, sin) => {
                    if (this.replyList[sin]) {
                        tableData.push({
                            enterpriseName0: ' ',
                            enterpriseName1: this.replyList[sin].dangerName ? this.replyList[sin].dangerName : ' ' ,
                            enterpriseName2: data.dangerName ? data.dangerName : ' ' 
                        })
                    } else {
                        tableData.push({
                            enterpriseName0: ' ',
                            enterpriseName1: ' ' ,
                            enterpriseName2: data.dangerName ? data.dangerName : ' ' 
                        })
                    }
                })
                console.log(tableData)
            } else if ((this.replyList.length == this.noReplyList.length) && this.replyList.length != 0 && this.noReplyList.length != 0) {
                this.replyList.forEach((item, index) => {
                    tableData.push({
                        enterpriseName0: ' ',
                        enterpriseName1: item.dangerName ? item.dangerName : ' ' ,
                        enterpriseName2: this.noReplyList[index].dangerName ? this.noReplyList[index].dangerName : ' ' 
                    })
                })
            } else {
                tableData.push({
                    enterpriseName0: ' ',
                    enterpriseName1: ' ',
                    enterpriseName2: ' '
                })
            }
            console.log(tableData)
            console.log(listHearder)
            //插入表格数据
            // const tableData =  [{enterpriseName0:"长亮科技1",enterpriseName1:"长亮科技1",enterpriseName2:"长亮科技1"},{enterpriseName0:"长亮科技2",enterpriseName1:"长亮科技2",enterpriseName2:"长亮科技2"}];

            tableData.forEach((item, index) => {
                console.log(item)
                console.log(listHearder)
                worksheet.insertRow(
                    index + 18,
                    listHearder.map((ite) => item[ite])
                );
            });
            //导出表格数据
            workbook.xlsx.writeBuffer().then((data) => {
                const blob = new Blob([data], { type: EXCEL_TYPE });
                console.log(blob.stream(), 6664744)
                FileSaver.saveAs(blob, this.rowData.warnName +"区(市)县危险区回复率统计.xlsx");
            });
        }