背景：
? ? ? ?本來是打算使用ActiveXObject來處理Excel，后面發(fā)現(xiàn)谷歌瀏覽器居然用不了這個對象；也怪我才疏學淺，百度了之后發(fā)現(xiàn)這玩意是IE的一個黑科技，其它瀏覽器居然用不了？！。所以采用xlsx.full.min.js插件來處理這類問題。（簡書.YZJGOOD原創(chuàng)文章，轉載請注明出處）
導入（需要xlsx.full.min.js）：
html:
<!--by yzjgood 前臺按鈕-->
<div class="button_su" id="zhuangzai">
? ? ? ? <a href="#" class="button_su_inner">
? ? ? ? ? <span class="button_text_container">
? ? ? ? ? ? 裝載數(shù)據
? ? ? ? ? </span>
? ? ? ? </a>
?</div>
<input id="zhenzhuangzai" type="file" onchange="impexcel(this)" style="display: none;" />
JS:
// by yzjgood 通過JQuery獲取元素觸發(fā)函數(shù)
$(function(){
? ? $("#zhuangzai").click(function(){
? ? ? ? $("#zhenzhuangzai").trigger("click");
? ? ? });
? });
var wb;// 讀取完成的數(shù)據
? ? // 導入
? ? function impexcel(obj) {
? ? ? ? if (!obj.files) {
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? var f = obj.files[0];
//新建文件讀取
? ? ? ? var reader = new FileReader();
? ? ? ? reader.onload = function(e) {
? ? ? ? ? ? var data = e.target.result;
? ? ? ? ? ? //將文件讀取為二進制字符串
? ? ? ? ? ? wb = XLSX.read(data, {type : 'binary'});
? ? ? ? ? ?console.log(wb.SheetNames[0]);
? ? ? ? ????// wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字
? ? ? ? ????// wb.Sheets[Sheet名]獲取第一個Sheet的數(shù)據
????????????//數(shù)組形式輸出數(shù)據
????????????var arr=XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
????????????console.log(arr);
????????????for(var key in arr){
????????????????//輸出下角標
? ? ? ? ? ? ? ? //console.log(key);
????????????????//輸出每個元素（對象形式）
????????????????console.log(key,arr[key]);
????????????????//輸出每個元素的值（數(shù)組形式）
????????????????console.log(Object.values(arr[key]));
????????????????//將數(shù)組轉化為字符串以“,”分割（字符串形式）
????????????????var strsub=Object.values(arr[key]).toString();
????????????????console.log(strsub);
????????????}
????????????//字符串形式輸出（原模原樣的將數(shù)組對象轉為字符串）
? ? ? ? ????var str=JSON.stringify(arr);
????????????console.log(str);
? ? ? ? ????};
? ? ? ? ????reader.readAsBinaryString(f);
? ????? }
導出（需要xlsx.full.min.js）：
“導出”這個功能查閱了了很多資料，經過測試以下方法真實可用，分享給廣大好友。
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title></title>
? ? </head>
<body>
? ? <button onclick="downloadExl(jsono)">導出 Excel</button>
? ? <script src="xlsx.full.min.js"></script>
? ? <!--調用FileSaver的saveAs函數(shù)也可以替代 a 標簽實現(xiàn)文件下載-->
? ? <!-- <script src = "./FileSaver.min.js"></script> -->
? ? <script>
? ? ? ? //如果使用 FileSaver.js 就不要同時使用以下函數(shù)
? ? ? ? function saveAs(obj, fileName) {
? ? ? ? ? ? //當然可以自定義簡單的下載文件實現(xiàn)方式
? ? ? ? ? ? var tmpa = document.createElement("a");
? ? ? ? ? ? tmpa.download = fileName || "下載";
? ? ? ? ? ? tmpa.href = URL.createObjectURL(obj);
? ? ? ? ? ? //綁定a標簽
? ? ? ? ? ? tmpa.click();
? ? ? ? ? ? //模擬點擊實現(xiàn)下載
? ? ? ? ? ? setTimeout(function () {
? ? ? ? ? ? //延時釋放
? ? ? ? ? ? ? ? URL.revokeObjectURL(obj);
? ? ? ? ? ? ? ? //用URL.revokeObjectURL()來釋放這個object URL
? ? ? ? ? ? }, 100);
? ? ? ? }
? ? ? ? var jsono = [
? ? ? ? ? ? { //測試數(shù)據1
? ? ? ? ? ? ? ? "姓名" : "Condor Hero",
? ? ? ? ? ? ? ? "年齡" : 18 ,
? ? ? ? ? ? ? ? "體重" : "60kg"
? ? ? ? ? ? },
? ? ? ? ? ? { //測試數(shù)據2
? ? ? ? ? ? ? ? "姓名" : "標標",
? ? ? ? ? ? ? ? "年齡" : 34 ,
? ? ? ? ? ? ? ? "體重" : "70kg"
? ? ? ? ? ? },
? ? ? ? ? ? { //測試數(shù)據3
? ? ? ? ? ? ? ? "姓名" : "老馮",
? ? ? ? ? ? ? ? "年齡" : 54 ,
? ? ? ? ? ? ? ? "體重" : "80kg",
? ? ? ? ? ? ? ? "性別" : "女"
? ? ? ? ? ? }
? ? ? ? ];
? ? ? ? const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };//這里的數(shù)據是用來定義導出的格式類型
? ? ? ? function downloadExl(data, type) {
? ? ? ? ? ? const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
? ? ? ? ? ? wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(data);
? ? ? ? ? ? //通過json_to_sheet轉成單頁(Sheet)數(shù)據
? ? ? ? ? ? saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), "這里是下載的文件名" + '.' + (wopts.bookType=="biff2"?"xls":wopts.bookType));
? ? ? ? }
? ? ? ? function s2ab(s) {
? ? ? ? ? ? if (typeof ArrayBuffer !== 'undefined') {
? ? ? ? ? ? ? ? var buf = new ArrayBuffer(s.length);
? ? ? ? ? ? ? ? var view = new Uint8Array(buf);
? ? ? ? ? ? ? ? for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
? ? ? ? ? ? ? ? return buf;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? var buf = new Array(s.length);
? ? ? ? ? ? ? ? for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
? ? ? ? ? ? ? ? return buf;
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
? 好的，這次的分享就到這里，謝謝！
（簡書.YZJGOOD原創(chuàng)文章，轉載請注明出處）
