網站開發進階(三十一)js如何將html表格導出為excel文件(后記)

js如何將html表格導出為excel文件(后記)

前言

項目前期做了個導出Excel表格的功能，但是經過測試發現只有在IE上才可以正確實現，在Chrome等瀏覽器中無法實現導出效果。經過上網搜索，嘗試通過插件的形式實現。通過安裝ActiveX?for?Chrome插件(地址欄輸入chrome://extensions/?進入擴展程序安裝頁面)。

經過測試，選擇ActiveX插件的形式并不能解決問題，故棄擲。經過一番網絡搜索，查到一個好的方法，其通過FileSaver.js實現瀏覽器寫入文件到本地磁盤。代碼如下:

按照前面訂單打印的思路，在頁面中嵌入一隱藏元素，然后獲取其內容。隱藏元素代碼如下:

{{querydata}}

獲取結果如下:

接下來需要做的工作解析上面的返回結果，然后拼接成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

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

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

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可實現導出功能，唯一的缺陷就是不存在文件命名，存儲位置選擇的對話框。

為了解決文件命名、存儲位置選擇問題，自己不得不放棄原來的導出方法，嘗試使用如下方法:

(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

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

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

});

})();

經過UI的稍微調整，問題總算得以解決。

參考文獻

1.http://www.chromi.org/archives/10618

2.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.http://my.oschina.net/tongjh/blog/316938

6.http://www.jb51.net/article/43136.htm

7.http://www.ynpxrz.com/n763517c2025.aspx

8.http://www.dreamdu.com/xhtml/tag_param/

有圖有真相

美文美圖

HTML 云速建站 網站

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。