• 技术文章 >web前端 >js教程

    详解ajax实现excel报表导出

    coldplay.xixicoldplay.xixi2020-11-18 17:03:20转载50

    推荐(免费):ajax视频教程

    利用ajax实现excel报表导出【解决乱码问题】,供大家参考,具体内容如下

    背景

    项目中遇到一个场景,要导出一个excel报表。由于需要token验证,所以不能用a标签;由于页面复杂,所以不能使用表单提交。初步考虑前端使用ajax,后端返回流,定义指定的header。

    第一版

    主要代码

    前端

    使用jquery的ajax

    var queryParams = {"test":"xxx"};
    var url = "xxx";
    $.ajax({
     type : "POST", //提交方式
     url : url,//路径
     contentType: "application/json",
     data: JSON.stringify(queryParams),
     beforeSend: function (request) {
      request.setRequestHeader("Authorization", "xxx");
     },
     success : function(result) {
      const blob = new Blob([result], {type:"application/vnd.ms-excel"});
      if(blob.size < 1) {
       alert('导出失败,导出的内容为空!');
       return
      }
      if(window.navigator.msSaveOrOpenBlob) {
       navigator.msSaveOrOpenBlob(blob, 'test.xls')
      } else {
       const aLink = document.createElement('a');
       aLink.style.display = 'none';
       aLink.href = window.URL.createObjectURL(blob);
       aLink.download = 'test.xls';
       document.body.appendChild(aLink);
       aLink.click();
       document.body.removeChild(aLink);
      }
     }
    });

    后端

    使用easypoi(如何使用easypoi请自行百度)

    import cn.afterturn.easypoi.excel.ExcelExportUtil;
    import cn.afterturn.easypoi.excel.entity.ExportParams;
    
    @PostMapping(value = "/download")
    public void downloadList(@RequestBody Objct obj, HttpServletResponse response) {
    
     ......
    
     List<Custom> excelList = new ArrayList<>();
     
       // excel总体设置
       ExportParams exportParams = new ExportParams();
       // 指定sheet名字
       exportParams.setSheetName("test");
       Workbook workbook = ExcelExportUtil.exportExcel(exportParams, Custom.class, excelList);
     
       response.setContentType("application/vnd.ms-excel");
       response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("test", "utf-8") + ".xls");
       OutputStream outputStream = response.getOutputStream();
       workbook.write(outputStream);
       outputStream.flush();
       outputStream.close();
       
     ......
     
    }

    测试结果

    excel能正常导出,但下载下来的excel全是乱码。经过各种找答案,整理了一下可能是以下原因导致:

    1、后端未设置字符集,或者在spring框架的过滤器中统一设置了字符集;
    2、前端页面未设置字符集编码;
    3、需要在ajax中添加 request.responseType = “arraybuffer”;

    经过不断测试,我的应该是第三点导致。但在jquery ajax 中添加后仍然不起作用,乱码问题始终无法解决。

    第二版

    主要代码

    前端,使用原生的ajax。后端未变动。

    var xhr = new XMLHttpRequest();
    xhr.responseType = "arraybuffer"; 
    xhr.open("POST", url, true);
    xhr.onload = function () {
     const blob = new Blob([this.response], {type:"application/vnd.ms-excel"});
     if(blob.size < 1) {
      alert('导出失败,导出的内容为空!');
      return;
     }
     if(window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveOrOpenBlob(blob, 'test.xls')
     } else {
      const aLink = document.createElement('a');
      aLink.style.display = 'none';
      aLink.href = window.URL.createObjectURL(blob);
      aLink.download = 'testxls';
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
      return;
     }
    }
    xhr.setRequestHeader("Authorization", "xxx");
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(queryParams));

    测试结果

    下载的excel不再乱码,原生ajax中使用 “arraybuffer” 使用是生效的。

    总结

    “arraybuffer” 这个参数导致的excel导出乱码,在原生的ajax中设置是有效的,在jquery的ajax中暂时还没找到生效的方式。

    以上就是详解ajax实现excel报表导出的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:jb51,如有侵犯,请联系a@php.cn删除
    专题推荐:excel报表 ajax
    上一篇:javascript如何改变原数组 下一篇:浅谈jQuery中$.extend()的使用方法
    第14期线上培训班

    相关文章推荐

    • java生成excel报表文件• thinkPHP+phpexcel实现excel报表输出功能实例详解• php实例-thinkPHP+phpexcel实现excel报表输出功能示例• ajax如何实现excel报表导出

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网