java中实现Excel表格导出(前端部分)

controller代码

    @RequestMapping("/api/excel")
    // @ResponseBody 可以不需要
    @SuppressWarnings(value = "unchecked")
    public void exportExcelOfPayAmount(HttpServletResponse response,
                                        String cardNum,
                                        String startDate,
                                        String endDate
    ) {
        CreateExcel ce = new CreateExcel();

        //按查询条件导出
        List<Map<String, Object>> data = userService.getUsers(cardNum, startDate, endDate)
        ce.exportExcelOfPayAmount(new Date(), data, response);
    }

1. 第一种形式

html代码

<div class="sInput1">
     <input maxlength="12" id="cardNum"  class="form-control" type="text" placeholder="请输入卡号" style="width:180px; height:35px;">&nbsp;&nbsp;
     <input  id="startDate" name="startDate" class="laydate-icon " readonly="readonly" placeholder="请输入开始日期">&nbsp;&nbsp;
     <input  id="endDate"  name="endDate" class="laydate-icon" readonly="readonly" placeholder="请输入结束日期">&nbsp;&nbsp;
     
     <button id="excel"  class="btn btn-info" >导出查询结果</button>
</div>

注意：不用在意"name"的样式，要注意每个"id"

js代码

<script>
    $(document).ready(function () {
      
        // excel导出
        $('#excel').click(function () {
            var cardNum = $('#cardNum').val();
            var startDate = $('#startDate').val();
            var endDate = $('#endDate').val();
            window.location.href="/api/excel?cardNum=" + cardNum + "&startDate=" + startDate + "&endDate=" + endDate;
        });
    });
</script>

注: 1. $('#excel').click(function () 拿到了button的id，对点击事件进行监听
    2. var cardNum = $('#cardNum').val();  取到input里面的值
    3. window.location.href  带着值跳转，该链接等同于在浏览其里面直接打开

1. 第二种形式

html代码

<div class="sInput1">
     <input maxlength="12" id="cardNum"  class="form-control" type="text" placeholder="请输入卡号" style="width:180px; height:35px;">&nbsp;&nbsp;
     <input  id="startDate" name="startDate" class="laydate-icon " readonly="readonly" placeholder="请输入开始日期">&nbsp;&nbsp;
     <input  id="endDate"  name="endDate" class="laydate-icon" readonly="readonly" placeholder="请输入结束日期">&nbsp;&nbsp;
     
     <button id="excel" onclick="exportExcel()" class="btn btn-info" >导出查询结果</button>
</div>

注意：不用在意"name"的样式，要注意每个"id"

js代码

<script>
   function exportExcel() {
        var cardNum = document.getElementById("cardNum").value;
        var startDate = document.getElementById("startDate").value;
        var endDate = document.getElementById("endDate").value;
        window.location.href="/api/excel?cardNum=" + cardNum + "&startDate=" + startDate + "&endDate=" + endDate;
    }
</script>

注: 1. function exportExcel() 是button所点击绑定的函数
    2. var cardNum = $('#cardNum').val();  取到input里面的值
    3. window.location.href  带着值跳转，该链接等同于在浏览其里面直接打开

总结：
1. 两种方法都可以跳转链接，其实对应的就是controller对应的请求链接
2. 如果有另一个controller中的API将值返回到了页面中，同时可以用一
   些模版的格式(如volicity)直接取到返回来的数值，那么不需要js了

volicity模版(参考)：

<button>
   <a href="#"  onclick="if(true){
    href='/api/excel?cardNum=?&date=$!dateFormatUtils.date2String($!date,'YYYY-MM-dd')'}">导出查询结果</a>
</button>