网站开发进阶(三十一)js如何将html表格导出为excel文件(后记)
2016-03-01 17:40
966 查看
js如何将html表格导出为excel文件(后记)
前言
项目前期做了个导出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的稍微调整,问题总算得以解决。
参考文献
1.http://www.chromi.org/archives/106182.http://www.oschina.net/news/16501/new-plugin-make-chrome-support-activex
3.http://zhidao.baidu.com/link?url=-wD7FbuwVMYGGgCr4X65CmL73z7TF53dzYWD2Z1-t1ysM0U2CyyyzSymO43DaAgUpEcJ1zwm_mgT8JdGo26Om2t6h5yWTW0TzPJ3rXjP6rS
4.http://baike.baidu.com/link?url=tXq95A_vT1Ksgruf2wFAxzwzYocQk-UD3YQ6hYVwL1CORcCax7ThRE7jypfkqVEaXQ9wgieKECONqx7tp75SHw2-OJ8v9XYCNcFqGC4j2V3
5./article/2186336.html
6./article/1251076.html
7.http://www.ynpxrz.com/n763517c2025.aspx
8.http://www.dreamdu.com/xhtml/tag_param/
有图有真相
美文美图
相关文章推荐
- 深入 HBase 架构解析(1)
- 浅谈web网站架构演变过程
- 【架构】浅谈web网站架构演变过程
- 一些好的资料网站
- HTML5特效源码网站
- MVC架构组成
- cmstop架构分析
- CSDN网站系统升级公告
- 架构之路--性能探究
- 关于网站端口的认识
- 解密微博红包:架构、防刷、监控和资源调度
- 《大型网站技术架构》读书笔记一:大型网站架构演化
- 《大型网站技术架构》读书笔记二:大型网站架构模式
- 《大型网站技术架构》读书笔记三:大型网站核心架构要素
- 《大型网站技术架构》读书笔记四:瞬时响应之网站的高性能架构
- 大型网站架构系列:消息队列(二)
- 大型网站架构系列:分布式消息队列(一)
- 百度地图API 学习网站
- 腾讯ISUX网站的一个小问题
- Keepalive+Amoeba+Mysql 实现高可用,负载均衡及读写分离