NET CORE+Vue 动态导出Excel

实体类

定义 Excel专用特性名 (应用导出表格列名)

 

引入Nuget包

1.Microsoft.AspNetCore.Hosting

2.DotNetCore.NPOI

引入包

using NPOI.SS.UserModel;
using NPOI.XSSF.UserModel;
using System.Reflection;
using Microsoft.AspNetCore.Hosting;

 Export类

        private IHostingEnvironment _IHostingEnvironment;

        public Export(IHostingEnvironment HostingEnvironment)
        {
            _IHostingEnvironment = HostingEnvironment;
        }

          
        /// <param name="list">数据集合</param> 
        /// <param name="sheetName">sheet名称</param>
        /// <returns>文件流</returns> 
        public byte[] Excel<T>(List<T> list)
        {
            try
            {
                IWorkbook workbook = new XSSFWorkbook();
                ISheet sheet = workbook.CreateSheet("自定义(sheet名称)");
                byte[] buffer = null;
                // 填充表头 
                List<string> ListIt = new List<string>();
                for (int i = 0; i < list.Count(); i++)
                {
                    IRow cellsHeader = sheet.CreateRow(i);
                    Type ty = list[i].GetType();
                    if (i == 0)
                    {
                        int c = 1;
                        //添加列名
                        foreach (PropertyInfo pi in ty.GetProperties())
                        {
                            if (pi.GetCustomAttribute<DisplayNameAttribute>() != null)
                            {
                                ListIt.Add(pi?.Name); //获得字段名称  
                                string DisplayName =                 pi.GetCustomAttribute<DisplayNameAttribute>()?.DisplayName; //获取字段特性中文名称  
                                cellsHeader.CreateCell(c).SetCellValue(DisplayName);
                                c++;
                            }
                        }//获取每个字段的列名
                        continue;
                    }
                    
                    IRow row = sheet.CreateRow(i);
                    //添加数据
                    foreach (var item in ty.GetProperties())
                    {

                        int index = ListIt.IndexOf(item.Name);//获得字段名称 
                        if (index > -1)
                        {
                            var Value = item.GetValue(list[i-1], null)?.ToString() ?? "  ";
                            row.CreateCell(index + 1).SetCellValue(Value);
                        } 
                    }  
                }

                using (MemoryStream ms = new MemoryStream())
                {
                    workbook.Write(ms);
                    buffer = ms.GetBuffer();
                    ms.Close();
                }
                return buffer;
            }
            catch (Exception)
            {
                return null;
            }
        } 

控制器代码

        private IHostingEnvironment _IHostingEnvironment;

        public Export(IHostingEnvironment HostingEnvironment)
        {
            _IHostingEnvironment = HostingEnvironment;
        }
        /// <summary>
        /// 动态导出Excel
        /// </summary>
        /// <param name="list">数据集</param> 
        /// <returns>返回流</returns>
        [HttpGet("ExportExcel")] 
        public IActionResult ExportExcel(List<SysCompany> list)
        { 
            Tool.Export ex = new Tool.Export(_IHostingEnvironment); 
            
           
            byte[] bytes = ex.Excel<SysCompany>(list);
            return File(bytes, "application/octet-stream"); 
        }

 注释: File是控制器自带方法,不是IO流中的File

 前端代码

 //导出
 handleExportExcel() {
  codeService.Export(参数).then(res => {
     const link = document.createElement("a");          
          link.href = URL.createObjectURL(res);
          link.setAttribute("download", "文件名" + ".xlsx"); //下载的文件名以及文件格式
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
  }).catch(err => {
    console.log(err)
  })
},

最终效果图

演示浏览器----Google

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui-plus 是基于 Element-UI 进行扩展的Vue组件库,而 SheetJS 是一个用于处理电子表格文件的JavaScript库。要在 Vue 3 中使用 ElementUIPlus 和 SheetJS 导出 Excel,可以按照以下步骤进行操作: 1. 首先,确保已安装 ElementUIPlus 和 SheetJS 的相关依赖包。可以通过 npm 或 yarn 安装,例如: ```shell npm install element-ui-plus // 安装 ElementUIPlus npm install sheetjs // 安装 SheetJS ``` 2. 在 Vue 3 项目的入口文件中,引入 ElementUIPlus 和 SheetJS 的样式和组件。例如: ```javascript import 'element-ui-plus/lib/theme-chalk/index.css'; // 引入 ElementUIPlus 样式 import SheetJS from 'sheetjs'; // 引入 SheetJS 组件 import ElementPlus from 'element-plus'; // 引入 Element-UI 组件 import { createApp } from 'vue'; const app = createApp(App); app.use(ElementPlus); app.use(SheetJS); app.mount('#app'); ``` 3. 在需要使用导出 Excel 功能的组件中,使用 ElementUIPlus 和 SheetJS 提供的相关组件和方法。例如,使用 `el-button` 组件和 `SheetJS-core` 的 `write` 方法导出 Excel: ```vue <template> <div> <el-button @click="exportExcel">导出 Excel</el-button> </div> </template> <script> import { ref } from 'vue'; import SheetJS from 'sheetjs'; export default { methods: { exportExcel() { const data = [ [ '姓名', '年龄', '性别' ], [ '张三', 18, '男' ], [ '李四', 20, '女' ], ]; /* 使用 SheetJS 的 write 方法导出 Excel */ const workbook = SheetJS.utils.book_new(); const worksheet = SheetJS.utils.aoa_to_sheet(data); SheetJS.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); SheetJS.write(workbook, 'example.xlsx'); }, }, } </script> ``` 这样,当点击 "导出 Excel" 按钮时,将会触发 `exportExcel` 方法,调用 SheetJS 的相关方法实现数据导出Excel 文件。注意,上述例子仅为示范,实际应用中需要根据具体需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值