1. 程式人生 > >vue使用js-xlsx外掛匯入Excel表格資料

vue使用js-xlsx外掛匯入Excel表格資料

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