创建生成周报excel表-问题无法使用ajax做excel导出

╰+哭是因爲堅強的太久メ 2022-11-29 03:09 136阅读 0赞

目前前端html：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我不要写周报1.0</title>
    </head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../js/myCreate.js"></script>
    <body>
    <div>
        <span>请填写您的名称</span><br>
        <a href="#" id="username" datatype="text" data-title="用户名">用户名</a>
    </div>
    
    
    <script>
    
    </script>
    
    </body>
    </html>

js：

预想是：

在加载 html时 通过ajax 将预设值好的 多个list转为json 最后发送至后台，将后台请求好的excel表通过新开窗口携带参数进行导出。

后台controller代码：

package com.zqj.controller;
    /*
    //                            _ooOoo_  
    //                           o8888888o  
    //                           88" . "88  
    //                           (| -_- |)  
    //                            O\ = /O  
    //                        ____/`---'\____  
    //                      .   ' \\| |// `.  
    //                       / \\||| : |||// \  
    //                     / _||||| -:- |||||- \  
    //                       | | \\\ - /// | |  
    //                     | \_| ''\---/'' | |  
    //                      \ .-\__ `-` ___/-. /  
    //                   ___`. .' /--.--\ `. . __  
    //                ."" '< `.___\_<|>_/___.' >'"".  
    //               | | : `- \`.;`\ _ /`;.`/ - ` : | |  
    //                 \ \ `-. \_ __\ /__ _/ .-` / /  
    //         ======`-.____`-.___\_____/___.-`____.-'======  
    //                            `=---='  
    //  
    //         .............................................  
    //                  佛祖保佑             永无BUG     
    
    /**
    * @ClassName: poi控制层
    * @Description: 生成表格(这里用一句话描述这个类的作用)
    * @author Gin_HK
    * @date 20200815
    *
    */
    
    import com.alibaba.fastjson.JSONObject;
    import com.zqj.pojo.eneity.PoiBean;
    import com.zqj.services.PoiServices;
    import org.apache.poi.hssf.usermodel.HSSFWorkbook;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.LinkedList;
    import java.util.List;
    
    @Controller
    public class PoiController {
    
        @Autowired
        private PoiServices poiServices;
    
    
        @RequestMapping("/createTable")
        public String getCreateTable() {
            System.out.println("createTable");
            return "createTable";
        }
    
        @RequestMapping("/download")
        public String getDownload() {
            System.out.println("download");
            return "download";
        }
    
        @RequestMapping("/create")
        @ResponseBody
        public String createWorkbook(HttpServletRequest request, HttpServletResponse response, @RequestBody List<String> excelData) throws IOException {
    
            response.reset();/*清缓存*/
    
            String createDate = new SimpleDateFormat("YYYY-MM-dd").format(new Date());
    
            System.out.println("获取到数据");
    
            /*也只有五个*/
    
            /*封装数据*/
            String department = excelData.get(0);
            String jsonSummaryList = excelData.get(1);
            String jsonExecutionList = excelData.get(2);
            String jsonPlanList = excelData.get(3);
            String jsonPlanResultList = excelData.get(4);
            String jsonNameList = excelData.get(5);
    
            /*初始化数据*/
    
            List<String> summaryList  = JSONObject.parseArray(jsonSummaryList,String.class);
            List<String> executionList  = JSONObject.parseArray(jsonExecutionList,String.class);
            List<String> planList  = JSONObject.parseArray(jsonPlanList,String.class);
            List<String> planResultList  = JSONObject.parseArray(jsonPlanResultList,String.class);
            List<String> nameList  = JSONObject.parseArray(jsonNameList,String.class);
    
            HSSFWorkbook excel = poiServices.createExcel(department, createDate, summaryList, executionList, planList, planResultList, nameList);
    
            /*导出 导出 导出 导出 导出 导出 导出 导出 导出 导出 导出 导出 */
            /*修改中文编码格式*/
            String agent = request.getHeader("USER-AGENT").toLowerCase();
            String codedFileName = java.net.URLEncoder.encode(department, "UTF-8");
            /*针对不同浏览器进行调整格式*/
            if (agent.contains("firefox")) {
                response.setCharacterEncoding("utf-8");
                response.setHeader("content-disposition", "attachment;filename=" + new String(department.getBytes(), "ISO8859-1") + ".xls");
            } else {
                response.setHeader("content-disposition", "attachment;filename=" + codedFileName + ".xls");
            }
    
            ServletOutputStream outputStream = response.getOutputStream();
            excel.write(outputStream);
            outputStream.close();
    
            return null;
        }
    }

但是问题出现了：

![20200818233142270.png][]

问题原因：ajax做excel无法导出。

参考文档：[https://www.cnblogs.com/coder-wf/p/12490749.html][https_www.cnblogs.com_coder-wf_p_12490749.html]

--------------------

2020-08-27 通过ajax进行excel下载的一种方法

其实是通过 ajax 实现 页面跳转，在跳转页面下载 excel文档。 目前在电脑端下载是可以实现的 但是在手机端下载后的表格为空 尚未找到该问题的原因。

[20200818233142270.png]: /images/20221124/b9d1445709fd4033a086a57da41dac31.png
[https_www.cnblogs.com_coder-wf_p_12490749.html]: https://www.cnblogs.com/coder-wf/p/12490749.html