前端下载excel

最新推荐文章于 2024-08-06 19:20:43 发布

张漂亮’s Blog

最新推荐文章于 2024-08-06 19:20:43 发布

阅读量395

点赞数

分类专栏：前端文章标签： excel

本文链接：https://blog.csdn.net/zxjdC/article/details/113254248

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

从后端查询列表list值，返回给前端一个list，在前端用excel插件设置excel列属性并将文件下载到本地（向浏览器写数据）。
在这里插入图片描述

导出按钮

<div class="buttons-preview">
            <a class="btn btn-default  btn-sm"
               href="javascript:exportxls()"><i class="fa fa-share"></i>导出工单报表</a>
        </div>

js实现

function exportxls(){
        $.ajax({          
            url: "${basePath}/workOrder/getExportReportList",
            data:$("#search_form").serializeJSON(),
            method: 'post',
            dataType:'json',
            success:function(data){
                // var json = data.rows;
                var json = data;
                json.unshift({
                    "id": "主键",
                    "warnId": "监控项id",
                    "warnName": "监控项名称",
                    "categoryName": "分类名称",
                    "groupName": "分组",
                    "warnLevel": "告警级别",
                    "totalWarnCount": "累计告警次数",
                    "sysErrorCount": "系统异常次数",
                    "ignoreWarnCount": "忽略期间触发次数",
                    "dealWarnCount": "处理问题期间触发次数",
                    "effectiveRate": "有效率(%)"
                });
                var sheet = XLSX.utils.json_to_sheet(json,{skipHeader:true});
                sheet['!cols']=[
                    {wpx: 45,hidden: true},
                    {wpx: 120},
                    {wpx: 60},
                    {wpx: 60},
                    {wpx: 60},
                    {wpx: 65},
                    {wpx: 60},
                    {wpx: 60},
                    {wpx: 60},
                    {wpx: 60},
                    {wpx: 60}
                ];
                openDownloadDialog(sheet2blob(sheet), '监控工单报表.xlsx');
            }
        });
    }

前端引入的插件：

<script src="${basePath}/plugs/SheetJs/xlsx.full.min.js"></script>
<script src="${basePath}/plugs/SheetJs/export.js"></script>

java后端代码

 @RequestMapping("getExportReportList")
 @ResponseBody
  public Object getExportReportList(HttpServletRequest request){
      Map<String, Object> param = this.paramsToMap(request);
      List<WarnWorkOrdersVo> data = warnWorkOrderService.getExportReportList(param);
      return data;
  }