js如何将html表格导出为excel文件(后记)

举报
SHQ5785 发表于 2022/12/09 08:56:21 2022/12/09
【摘要】 前言      项目前期做了个导出Excel表格的功能，但是经过测试发现只有在IE上才可以正确实现，在Chrome等浏览器中无法实现导出效果。经过上网搜索，尝试通过插件的形式实现。通过安装ActiveX for Chrome插件(地址栏输入chrome://extensions/ 进入扩展程序安装页面)。      经过测试，选择ActiveX插件的形式并不能解决问题，故弃掷。经过一番网络搜...

前言

      项目前期做了个导出Excel表格的功能，但是经过测试发现只有在IE上才可以正确实现，在Chrome等浏览器中无法实现导出效果。经过上网搜索，尝试通过插件的形式实现。通过安装ActiveX for Chrome插件(地址栏输入chrome://extensions/ 进入扩展程序安装页面)。

      经过测试，选择ActiveX插件的形式并不能解决问题，故弃掷。经过一番网络搜索，查到一个好的方法，其通过FileSaver.js实现浏览器写入文件到本地磁盘。代码如下:

<script>
(function(){
    document.getElementById("saveBtn").onclick = function(event){
        event.preventDefault();
        var BB = self.Blob;
        saveAs(
              new BB(
                  ["\ufeff" + document.getElementById("content").value] //\ufeff防止utf8 bom防止中文乱码
                , {type: "text/plain;charset=utf8"}
            )
            , document.getElementById("filename").value
        );
    };
})();
</script>

按照前面订单打印的思路，在页面中嵌入一隐藏元素，然后获取其内容。隐藏元素代码如下:

<i id="sunny" hidden="hidden">{{querydata}}</i>

获取结果如下:

 

      接下来需要做的工作解析上面的返回结果，然后拼接成Excel导出方法所需形式。

      解析代码如下:

      var content = document.getElementById("sunny").innerHTML;
//        alert(content);
        var contentText = "药品名,药品ID,价格(元),数量(盒),下单时间,订单ID,订单内容,购药者,处方药,药品种类\n";
        var obj = JSON.parse(content); // 由JSON字符串转换为JSON对象
//        alert(obj.length);
        var billDtl = '';
        for(k=0; k<obj.length; k++){
        	var bill = obj[k];
        	var content = '';
        	var index = bill.billContent.indexOf(',');
//        alert(index);
        if(index != -1){
        	   	var contentArray = bill.billContent.split(",");
        	if(contentArray.length > 1){
        	for(j=0; j<contentArray.length-1; j++){
        	content += contentArray[j] + '、';
        	}
        	content += contentArray[j];
        	}
//        alert(content);
        	}
        	billDtl += bill.medname + "," + bill.medid + "," + bill.medprice + "," + bill.sellcnt + "," + bill.tx_time + "," + bill.billid + "," 
        	+ content + "," + bill.buy_uid + "," + bill.iscf + "," + bill.medtype + "\n";
        }
        alert(billDtl);
其中主要涉及到

json数组字符串转换为json数组:

var obj = JSON.parse(content); // 由JSON字符串转换为JSON对象

订单内容格式化:

var content = '';

var index = bill.billContent.indexOf(',');

//alert(index);

if(index != -1){

   var contentArray = bill.billContent.split(",");

   if(contentArray.length > 1){

     for(j=0; j<contentArray.length-1; j++){

        content += contentArray[j] + '、';

      }

     content += contentArray[j];

   }

//alert(content);

    }else{

content = bill.billContent;

}

订单内容拼接:

billDtl += bill.medname + "," + bill.medid + "," + bill.medprice + "," + bill.sellcnt + "," + bill.tx_time + "," + bill.billid + "," + content + "," 

+ bill.buy_uid + "," + bill.iscf + "," + bill.medtype + "\n";

      至此，Ecxel可实现导出功能，唯一的缺陷就是不存在文件命名，存储位置选择的对话框。

      为了解决文件命名、存储位置选择问题，自己不得不放弃原来的导出方法，尝试使用如下方法:

<span style="color:#ff0000;">(function (){
Downloadify.create('downloadify',{
    filename: function(){
      //return document.getElementById('filename').value;
      return "Sunny.csv";
    },
    data: function(){ 
        var content = document.getElementById("sunny").innerHTML;
//        alert(content);
        var contentText = "药品名,药品ID,价格(元),数量(盒),下单时间,订单ID,订单内容,购药者,处方药,药品种类\n";
        var obj = JSON.parse(content); // 由JSON字符串转换为JSON对象
//        alert(obj.length);
        var billDtl = '';
        for(k=0; k<obj.length; k++){
        	var bill = obj[k];
        	var content = '';
        	var index = bill.billContent.indexOf(',');
//        alert(index);
        if(index != -1){
        	   	var contentArray = bill.billContent.split(",");
        	if(contentArray.length > 1){
        	for(j=0; j<contentArray.length-1; j++){
        	content += contentArray[j] + '、';
        	}
        	content += contentArray[j];
        	}
//        alert(content);
        	}else{
        	content = bill.billContent;
        	}
        	billDtl += bill.medname + "," + bill.medid + "," + bill.medprice + "," + bill.sellcnt + "," + bill.tx_time + "," + bill.billid + "," 
        	+ content + "," + bill.buy_uid + "," + bill.iscf + "," + bill.medtype + "\n";
        }
        alert(billDtl);
        return "\ufeff" + contentText + billDtl;
    },
    onComplete: function(){ 
      alert('保存成功!'); 
    },
    onCancel: function(){ 
    },
    onError: function(){ 
      alert('保存失败!'); 
    },
    transparent: false,
    swf: 'img/downloadify.swf',
    downloadImage: 'img/download.png',
    width: 100,
    height: 30,
    transparent: true,
    append: false
  });
})();</span>

      经过UI的稍微调整，问题总算得以解决。

有图有真相

 

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JSON
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入