【知識積累】使用js-xlsx,JS實現匯入excel表格
阿新 • • 發佈:2019-01-05
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; }