1. 程式人生 > >【知識積累】使用js-xlsx,JS實現匯入excel表格

【知識積累】使用js-xlsx,JS實現匯入excel表格

1.匯入功能的實現

1.1.引入相關的js外掛

<!--js-xlsx  -->
<!-- 		<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script> -->
		<script src="../../plugins/js-xlsx/xlsx.full.min.js"></script>
1.2.設定對應的彈窗
<div class="modal-body">
<input type="file" onchange="importf(this)" id="excel" />
 <span id="uploadCarVin_prompt" style="color: red;"> </span>
</div>

1.3.操作程式碼

var wb; //讀取完成的資料  
var rABS = false; //是否將檔案讀取為二進位制字串  
//匯入檔案
function importf(obj) {				
	if(!obj.files) {
	return;
	}
	//驗證格式
	var suffix = obj.files[0].name.split(".")[1]
	if(suffix != 'xls' && suffix !='xlsx'){
	$("#uploadCarVin_prompt").text('匯入的檔案格式不正確!');			    	
	//清空上傳文字框檔案
	var obj = document.getElementById("excel");
	obj.outerHTML = obj.outerHTML;
	return;
	}
	const IMPORTFILE_MAXSIZE = 10 * 1024; //自定義控制匯入檔案大小10M
	if(obj.files[0].size / 1024 > IMPORTFILE_MAXSIZE) {
		$("#uploadCarVin_prompt").text('匯入的表格檔案不能大於10M!');
		/清空上傳文字框檔案
		var obj = document.getElementById("excel");
		obj.outerHTML = obj.outerHTML;
		return;
		}	
		var f = obj.files[0];
		var reader = new FileReader();
		reader.onload = function(e) {
		var data = e.target.result;
		if(rABS) {
		wb = XLSX.read(btoa(fixdata(data)), { //手動轉化
		type: 'base64'
			});
		} else {
		wb = XLSX.read(data, {
		type: 'binary'
		});
		}
		var strVin = ""; 
		var jsonStr = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
		var jsonObj = JSON.parse(jsonStr);
		for(var i = 0; i < jsonObj.length; i++) {
		strVin = jsonObj[i].VIN + "," + strVin;
		}					
		$("#fenceCarList").val(strVin);//將資料在某個位置顯示出來
		/選擇檔案框消失
		$('#addModal').modal('hide');
				};

				if(rABS) {
					reader.readAsArrayBuffer(f);
				} else {
					reader.readAsBinaryString(f);
				}
			}
			//檔案流轉BinaryString
			function fixdata(data) {
				var o = "",
					l = 0,
					w = 10240;
				for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
				o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
				return o;
			}