vue使用js-xlsx外掛匯入Excel表格資料
阿新 • • 發佈:2018-12-15
import Vue from 'vue' import XLSX from 'xlsx' /** * 匯入ex表格 得到json資料 * 已注入所有Vue例項, * template模板裡呼叫 $importf * 元件方法裡呼叫 this.$importf * 例:<input type="file" id="file22" @change="importf('file22')" /> * this.$importf(id) 得到 json資料 */ const importf = (id) => { let promise = new Promise((resolve, reject) => { // 匯入 // FileReader共有4種讀取方法: // 1.readAsArrayBuffer(file) :將檔案讀取為ArrayBuffer。 // 2.readAsBinaryString(file) :將檔案讀取為二進位制字串 // 3.readAsDataURL(file) :將檔案讀取為Data URL // 4.readAsText(file, [encoding]) :將檔案讀取為文字,encoding預設值為'UTF-8' var wb // 讀取完成的資料 var rABS = false // 是否將檔案讀取為二進位制字串 let obj = document.getElementById(id) if (!obj.files) { return } var f = obj.files[0] var reader = new FileReader() if (rABS) { reader.readAsArrayBuffer(f) } else { reader.readAsBinaryString(f) } var arr = [] 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' }) } // wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字 // wb.Sheets[Sheet名]獲取第一個Sheet的資料 arr = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) // console.log(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]))) // console.log(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])) // return XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) resolve(arr) } reader.onerror = function (e) { reject(arr) } }) return promise } const fixdata = (data) => { // 檔案流轉BinaryString var o = '' var l = 0 var 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 } Vue.prototype.$importf = importf