Vue使用xlsx读取文件

2020-06-29  本文已影响0人  情话小句

一、安装xlsx

npm i xlsx

二、使用xlsx

1、使用element-ui编写一个上传页面

<el-upload action="" :auto-upload="false" :on-change="onChange" :limit="1">
  <el-button size="mini" type="success">上传文件</el-button>
</el-upload>
async onChange (file) {
  let dataBinary = await readFile(file.raw)
  let workBook = xlsx.read(dataBinary, {type: 'binary', cellDates: true})
  let workSheet = workBook.Sheets[workBook.SheetNames[0]]
  const data = xlsx.utils.sheet_to_json(workSheet)
  console.log(data)
}

2、工具类

/* 读取文件 */
export const readFile = (file) => {
  return new Promise(resolve => {
    let reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = ev => {
      resolve(ev.target.result)
    }
  })
}
效果图
上一篇下一篇

猜你喜欢

热点阅读