Vue使用xlsx读取文件

一、安装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)
    }
  })
}
效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。