需求说明:

点击导出按钮,导出当前表格的数据,并下载到本地。
(我:由于页面判断比较多,前端js进行了处理,已经将数据查询结果整理到表格,为了防止后端再次查询,决定将数据(json数据)直接传到后端,变成Excel输出出来,进行下载。)

偶遇两座大山
第一座大山:乱码

利用Ajax实现的,按照想法就可以搞定了,然后最后出现的问题是,后端已经将Excel输出流返回到前端,但是ajax却无法接受这种流,在返回的response中显示的是乱码,

var text = JSON.stringify(data); 
 $.ajax({
      type:'POST',
      url:  "http://www.buyfree.cc/xxxxxxxx/" ,
      data: {"text": text},
      success: function(response) {
          var $a = $("<a>");
          $a.attr("href", response.data.file);
          $a.attr("download", response.data.filename);
          $("body").append($a);
          $a[0].click();
          $a.remove();
      }
  });

data 为之前js处理后的表格数据,格式为Object数组,后转成json数据,如图

java 实现excel 文件转为html java excel转json_json


response:请求成功后的返回乱码,程序执行到success内就报错了,但是响应成功是1000%的。

java 实现excel 文件转为html java excel转json_POI_02


以上这种情况,我百度了好久,最后发现了一位犯了一模一样错的人,可以看一下他的帖子,他是GET请求,最后换了一种方式,解决了。(地址:)

读了他最后一段话“文件的下载是以二进制的形式读取的,而ajax的请求是字符型的请求,所以没有办法实现下载,最后只能抛弃ajax的方法”,然后也抛弃了ajax,换成了JS原生写法。

第二座大山:参数为空

为什么要换原生写法?也是百度了很久,发现有人这样写,然后借鉴了一下,结果出现第二座大山,是后端收不到我传递的JSON数据,一直是NULL,

java 实现excel 文件转为html java excel转json_EXCEL_03


请教了不少人,也没有解决,说了大致两种方案:第一,切换成get请求,第二使用刚刚第一种方法将数据传递过去,将生成的Excel保存到服务器,返回下载链接,通过前端转跳,来下载服务器文件。(下面代码为错误代码)

var text = JSON.stringify(data);
var url = "http://www.buyfree.cc/xxxxxxxx/" ;
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
// 返回类型blob
xhr.responseType = "blob";  
xhr.setRequestHeader("Content-type", "application/json");
xhr.onload = function () {
     if (this.status === 200) {
         var blob = this.response;
         var reader = new FileReader();
         reader.readAsDataURL(blob); 
         reader.onload = function (e) {
             var a = document.createElement('a');
             a.download = '下载文件xx.xlsx';
             a.href = e.target.result;
             $("body").append(a); 
             a.click();
             $(a).remove();
         }
     }
 };
 // 发送ajax请求
 var content ="text=" +text;
 xhr.send(content);

想来想去两种方案都不适合我,然后继续百度来解决这个传值json问题,时间比较漫长,有点像“发明灯泡”,看见能用的就试下,最后,成功了!!!!!(代码如下)

var text = JSON.stringify(data);
var url = "http://www.buyfree.cc/xxxxxxxx/" ;
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
// 返回类型blob
xhr.responseType = "blob";  
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xhr.onload = function () {
     if (this.status === 200) {
         var blob = this.response;
         var reader = new FileReader();
         reader.readAsDataURL(blob); 
         reader.onload = function (e) {
             var a = document.createElement('a');
             a.download = '下载文件xx.xlsx';
             a.href = e.target.result;
             $("body").append(a); 
             a.click();
             $(a).remove();
         }
     }
 };
 // 发送ajax请求
 var content ="text=" +text;
 xhr.send(content);

相比较之前的代码就换了一句话xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); 这句话,帮我翻越了两座大山。我也不知道这属于什么类型的问题。使用这个方法,可以实现Excel下载,而且还是post请求,而且还是传JSON数据。

java 实现excel 文件转为html java excel转json_导出_04