C#/.net 导出含有Echarts图表的数据到Excel表格

需求:

1.导出表格数据到Excel。

2.除了表格的数据,包含echarts图表数据也需要导出到Excel进行展示

3.后端需要制表,画单元格位置以及Echarts图表存储在指定位置,画单元格背景

最终实现:

连同Echarts图表一并导出到Excel

点击导出后:

1.标题列合并,字体加粗居中以及指定了logo图片位置

2.指定了echarts图位置

3.表格数据的解析与排版,指定某单元格背景色的判断(跟功能需求有关,这里不做解释)。

实现思路:

1.关于echarts图表如何导出到表格中?

可以将echarts导出之前做处理,将它转为base64编码的图片格式再传给后端进行导出表格的代码编写即可。

部分前端代码展示:

//批量更新导出
    function ImportForm() {
        var $ = layui.jquery;
        var common = layui.common;
        if (!treeid) {
            common.modalMsg("未选中左菜单栏产线，请选择产线进行Excel导出", "warning");
            return false;
        }
        common.ajax({
            url: '/GeneralManage/Productionline/GetFormJson',
            dataType: 'json',
            data: { keyValue: treeid },
            async: false,
            success: function (data) {
                name = data.F_FullName;
                layers = data.F_Layers;

            }
        });
        if (layers != 2) {
            common.modalMsg("未选中左菜单栏产线，请选择产线进行Excel导出", "warning");
            return false;
        }
        if (listtable.length == 0) {
            common.modalMsg("该产线下暂无可导出数据!", "warning");
            return false;
        }
        //以上无需关注 跟项目需求有关

        //从这开始 将Echarts图表数据转化为base64图片编码格式传给后端
        let baseCanvas = document.getElementById('main').getElementsByTagName('canvas')[0]
        let width = baseCanvas.width;
        let height = baseCanvas.height;
        let ctx = baseCanvas.getContext("2d");
        ctx.drawImage(baseCanvas, width, height);
        var base64=baseCanvas.toDataURL();
         console.log(base64, "base64"); //这里打印出来看是否转化成功
 
    //提交给后端接口进行导出处理即可
        common.ajax({
            url: "/GeneralManage/Maecapacitymanager/ExportToExcel",
            data: { data: listtable, baseImg: base64 },
            method: "POST",
            async: false,
            success: function (data) {
                console.log(data, "??data")
                window.location.href = data.message;

                //这个是用于导出表格后会占用服务器资源,顺便删除服务器上的导出的文件
                common.ajax({
                    url: "/GeneralManage/Maecapacitymanager/DeleteExcelport",
                    data: { path: data.message },
                    async: false,
                    success: function (data) {
                        console.log("删除成功", data)
                    }
                });
            },
            error: function (error) {
                window.location.href = error.responseText;
            }
        });
        
    }

2.后端代码部分展示:

制作表格样式以及echarts图片的处理等

using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write))
                {
                    IWorkbook workbook = new XSSFWorkbook();
                    ISheet sheet = workbook.CreateSheet("Sheet1");

                    IRow chartDataRows = sheet.CreateRow(0); // 在表头之前插入数据行
                    chartDataRows.Height = 50 * 20;
                    chartDataRows.CreateCell(0).SetCellValue(" line capacity chart");

                    // 创建字体样式
                    XSSFFont font = (XSSFFont)workbook.CreateFont();
                    font.FontHeightInPoints = 16; // 设置字体大小
                    font.IsBold = true; // 加粗

                    // 创建单元格样式并将字体样式应用
                    XSSFCellStyle cellStyle = (XSSFCellStyle)workbook.CreateCellStyle();
                    cellStyle.SetFont(font); // 设置字体样式

                    cellStyle.Alignment = HorizontalAlignment.Center; // 水平居中
                    cellStyle.VerticalAlignment = VerticalAlignment.Center; // 垂直居中
                    chartDataRows.RowStyle = cellStyle;

                    // 插入小图片（logo）
                    string directoryPaths = GlobalContext.HostingEnvironment.WebRootPath + $@"/" + "images" + $@"/" + "tops_20231009164951.png";
                    int pictureLogo = workbook.AddPicture(System.IO.File.ReadAllBytes(directoryPaths), PictureType.JPEG);
                    XSSFDrawing drawings = (XSSFDrawing)sheet.CreateDrawingPatriarch();
                    XSSFClientAnchor anchors = new XSSFClientAnchor(0, 0, 0, 0, 5, 0, 6, 1); // 调整图片坐标和大小
                    XSSFPicture pictures = (XSSFPicture)drawings.CreatePicture(anchors, pictureLogo);

                    CellRangeAddress mergedRegion = new CellRangeAddress(0, 0, 0, 5);
                    sheet.AddMergedRegion(mergedRegion);//合并单元格


                    IRow chartDataRows1 = sheet.CreateRow(1);//插入空白行
                                                             // 创建新行并插入 EChart 数据
                    IRow chartDataRow = sheet.CreateRow(2); // 在表头之前插入数据行
                    chartDataRow.Height = 210 * 20;
                    string base64Image = baseImg;
                    base64Image = base64Image.Replace("data:image/jpeg;base64,", ""); // 移除可能包含的数据前缀
                    base64Image = base64Image.Replace("data:image/png;base64,", "");
                    base64Image = base64Image.Replace("data:image/jpg;base64,", "");
                    base64Image = base64Image.Replace(" ", "+"); // 将空格替换为+
                    base64Image = base64Image.Replace("\n", ""); // 移除换行符


                    byte[] imageBytes = Convert.FromBase64String(base64Image);

                    // 创建图片
                    int pictureIndex = workbook.AddPicture(imageBytes, PictureType.JPEG);

                    XSSFDrawing drawing = (XSSFDrawing)sheet.CreateDrawingPatriarch();
                    XSSFClientAnchor anchor = new XSSFClientAnchor(0, 0, 0, 0, 0, 2, 6, 3); // 调整图片坐标和大小
                    XSSFPicture picture = (XSSFPicture)drawing.CreatePicture(anchor, pictureIndex);




                    // 创建表头
                    IRow headerRow = sheet.CreateRow(4);
                    headerRow.CreateCell(0).SetCellValue("Station");
                    headerRow.CreateCell(1).SetCellValue("manual");
                    headerRow.CreateCell(2).SetCellValue("auto");
                    headerRow.CreateCell(3).SetCellValue("CT");
                    headerRow.CreateCell(4).SetCellValue("TCT");
                    headerRow.CreateCell(5).SetCellValue("remark");
                    headerRow.Height = 30 * 20;

                    // 创建样式
                    XSSFCellStyle titlestyle = (XSSFCellStyle)workbook.CreateCellStyle();
                    //titlestyle.FillForegroundColor = HSSFColor.SkyBlue.Index; // 背景色
                    //titlestyle.FillPattern = FillPattern.SolidForeground;
                    titlestyle.Alignment = HorizontalAlignment.Center; // 水平居中
                    titlestyle.VerticalAlignment = VerticalAlignment.Center; // 垂直居中
                                                                             // 设置单元格样式
                    for (int i = 0; i < headerRow.LastCellNum; i++)
                    {
                        headerRow.RowStyle = titlestyle;
                    }

                    // 设置列宽
                    sheet.SetColumnWidth(0, 30 * 256); // 第0列，宽度为12个字符的宽度
                    sheet.SetColumnWidth(1, 10 * 256); // 第1列，宽度为15个字符的宽度
                    sheet.SetColumnWidth(2, 10 * 256); // 第2列，宽度为10个字符的宽度
                    sheet.SetColumnWidth(3, 10 * 256);  // 第3列，宽度为8个字符的宽度
                    sheet.SetColumnWidth(4, 10 * 256); // 第4列，宽度为10个字符的宽度
                    sheet.SetColumnWidth(5, 30 * 256); // 第5列，宽度为20个字符的宽度
                    // 填充数据
                    for (int i = 0; i < data.Count; i++)
                    {
                        IRow dataRow = sheet.CreateRow(i + 5);
                        //dataRow.CreateCell(0).SetCellValue(data[i].F_StationName);
                        //dataRow.CreateCell(1).SetCellValue(data[i].F_Manual);
                        //dataRow.CreateCell(2).SetCellValue((double)data[i].F_Auto);
                        //dataRow.CreateCell(3).SetCellValue((double)data[i].F_CT);
                        //dataRow.CreateCell(4).SetCellValue((double)data[i].F_TCT);
                        //dataRow.CreateCell(5).SetCellValue(data[i].F_Remark);
                        // 创建单元格和样式对象
                        ICellStyle style = workbook.CreateCellStyle();
                        ICell cell0 = dataRow.CreateCell(0);
                        ICell cell1 = dataRow.CreateCell(1);
                        ICell cell2 = dataRow.CreateCell(2);
                        ICell cell3 = dataRow.CreateCell(3);
                        ICell cell4 = dataRow.CreateCell(4);
                        ICell cell5 = dataRow.CreateCell(5);

                        // 设置单元格的值
                        cell0.SetCellValue(data[i].F_StationName+" " + data[i].F_Stationdescription);
                        cell1.SetCellValue(data[i].F_Manual);
                        cell2.SetCellValue((double)data[i].F_Auto);
                        cell3.SetCellValue((double)data[i].F_CT);
                        cell4.SetCellValue((double)data[i].F_TCT);
                        cell5.SetCellValue(data[i].F_Remark);


                        // 创建一个新的样式对象
                        ICellStyle newStyle = workbook.CreateCellStyle();
                        if ((double)data[i].F_CT > (double)data[i].F_TCT || (double)data[i].F_CT == 0)
                        {
                            // 设置背景颜色为粉色
                            newStyle.FillForegroundColor = NPOI.HSSF.Util.HSSFColor.Pink.Index;
                            newStyle.FillPattern = FillPattern.SolidForeground;
                        }
                        else if ((double)data[i].F_CT <= (double)data[i].F_TCT && (double)data[i].F_CT != 0)
                        {
                            // 创建一个样式对象

                            // 设置背景颜色为蓝色
                            newStyle.FillForegroundColor = NPOI.HSSF.Util.HSSFColor.LightBlue.Index;
                            newStyle.FillPattern = FillPattern.SolidForeground;
                        }
                        // 添加边框
                        newStyle.BorderBottom = BorderStyle.Thin;
                        newStyle.BorderTop = BorderStyle.Thin;
                        newStyle.BorderLeft = BorderStyle.Thin;
                        newStyle.BorderRight = BorderStyle.Thin;

                        // 将样式应用于单元格
                        cell3.CellStyle = newStyle;
                        // ... 继续设置其他列的数据
                    }
                    workbook.Write(fileStream);
                }

以上为学习记录,欢迎一起探讨学习。