我爱模板网 > 建站教程 > 前端框架 >  vue使用js-xlsx读取excel数据,亲测,可行正文

vue使用js-xlsx读取excel数据,亲测,可行

js-xlsx是一款非常好的读写excel、xlm、csv等文件的js前端库,这里是它的vue版本读取excel数据的使用方法:

安装:
npm install xlsx --save
引入:
import XLSX from 'xlsx'
布局,使用elementUI上传组件:
<el-upload
    ref="upload"
    action="/"
    :show-file-list="false"
    :on-change="importExcel"
    :auto-upload="false">
    <el-button
      slot="trigger"
      icon="el-icon-upload"
      size="small"
      type="primary">
      上传文件
    </el-button>
</el-upload>
importExcel方法:
importExcel(file) {
  // let file = file.files[0] // 使用传统的input方法需要加上这一步
  const types = file.name.split('.')[1]
  const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
  if (!fileType) {
    this.$message('格式错误!请重新选择')
    return
  }
  this.file2Xce(file).then(tabJson => {
    if (tabJson && tabJson.length > 0) {
      this.xlsxJson = tabJson
      console.log('数据', this.xlsxJson)
      // xlsxJson就是解析出来的json数据,数据格式如下
      // [
      //   {
      //     sheetName: sheet1
      //     sheet: sheetData
      //   }
      // ]
    }
  })
},
file2Xce(file) {
  return new Promise(function(resolve, reject) {
    const reader = new FileReader()
    reader.onload = function(e) {
      const data = e.target.result
      this.wb = XLSX.read(data, {
        type: 'binary'
      })
      const result = []
      this.wb.SheetNames.forEach((sheetName) => {
        result.push({
          sheetName: sheetName,
          sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
        })
      })
      resolve(result)
    }
    reader.readAsBinaryString(file.raw)
    // reader.readAsBinaryString(file) // 传统input方法
  })
}



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:Vue路由的$router.back(-1)回退时如何判断有没有上一个路由 下一篇:elementUI标签页渲染echarts图的问题
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢