美文网首页
Vue使用xlsx读取文件

Vue使用xlsx读取文件

作者: 情话小句 | 来源:发表于2020-06-29 20:54 被阅读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)
        }
      })
    }
    
    效果图

    相关文章

      网友评论

          本文标题:Vue使用xlsx读取文件

          本文链接:https://www.haomeiwen.com/subject/mtvafktx.html