如何在vue项目中直接读取本地excel文件中的数据

每天吃肉肉

于 2021-03-30 11:15:57 发布

阅读量5.7k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_39098810/article/details/115320750

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中利用XLSX库读取和处理Excel文件。首先通过npm安装xlsx库，然后在组件中导入并使用。接着，通过axios从本地获取文件，将获取到的数据转换为Uint8Array，再用XLSX库读取并解析为工作簿。通过XLSX.utils.sheet_to_json方法，将工作表数据转换为JSON格式，便于进一步处理和展示。

摘要由CSDN通过智能技术生成

1.安装并在使用的界面引入XLSX

npm install xlsx

//demo.vue界面
<script>
import XLSX from 'xlsx'
</script>

2.获取本地文件信息，因为xlsx是后端访问的，所以需要用aixos请求去得到获取后的数据

其中url是本地文件路径，放在public中 url:/demo.xlsx

readExcelFile(url) {
      Axios.get(url,{responseType:'arraybuffer'})
      .then((res)=>{
        let data = new Uint8Array(res.data)
        let wb = XLSX.read(data, {type:"array"})
        let sheets = wb.Sheets // 获取文档数据
        this.content = this.transformSheets(sheets)
      }).catch( err =>{
        this.err = err
      })
    },
transformSheets(sheets){
      let content1 = []
      let tmplist = []
      for (let key in sheets){
        //读出来的workbook数据很难读,转换为json格式,参考https://github.com/SheetJS/js-xlsx#utility-functions
        tmplist.push(XLSX.utils.sheet_to_json(sheets[key]).length)
        content1.push(XLSX.utils.sheet_to_json(sheets[key]))
      }
      console.log(tmplist)
      console.log(content1)
    }