Sheet.JS 在Vue-cli中使用

参考文章：

vue导入处理Excel表格详解_普通网友的博客-CSDN博客_vue导入excel数据

1.安装包

npm i xlsx -S 

2.引入

import XLSX from "xlsx"
import { read, utils } from "xlsx"

两种引入方式都可以  第一种使用需要 XLSX.read()  第二种可以直接使用

导出表格 

在这里 表格是由 数据 v-for 渲染出来的 为这个表格加上id  点击导出按钮 将表格内容转成

table_to_book 再使用 writeFile 写出文件导出

 <table style="width: 100%; line-height: 2" id="TableToExport">
        <thead style="background: #f10251; color: white">
          <tr>
            <th>版本</th>
            <th>姓名</th>
            <th>项目</th>
            <th>成绩</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="n in initData" :key="n.id">
            <td>{{n.id}}</td>
            <td>{{n.name}}</td>
            <td>{{n.project}}</td>
            <td>{{n.results}}</td>
            <td @click="deleteC(n.id)" style="cursor:pointer">删除</td>
          </tr>
        </tbody>
      </table>

<script>

 data(){
    return{
      initData:[
        {
          id: 2014,
          name: "Uzi",
          project: "对线能力",
          results: "S",
        },
        {
          id: 2016,
          name: "Faker",
          project: "团队荣誉",
          results: "SR",
        },
        {
          id: 2018,
          name: "The shy",
          project: "伤害转化",
          results: "A+",
        },
        {
          id: 2020,
          name: "sofm",
          project: "土匪打野",
          results: "A+",
        },
      ]
    }

  methods:{
    deleteC(id){
      const index = this.initData.findIndex(x => x.id === id)
      this.initData.splice(index,1)
    },
    sheetjsexport(){
      let wb = XLSX.utils.table_to_book(
        document.getElementById("TableToExport"),
        { raw: true }
      );
      XLSX.writeFile(wb, "SheetJSTable.xlsx");
    }
}
</script>

导入表格

vue的核心是数据驱动视图、我们要做的是运用sheet工具的api 把表格转成类似JSON的相关数据、再根据需要渲染数据到页面上

1.点击上传的按钮 绑定事件 限制上传的文件类型

<input type="file" @change="inputFile($event)" accept=".xlsx, .xls, .csv" />

2.

• 获得事件对象中的文件
• file[0] 使用FileReader 提供一个完整的事件模型，用来捕获读取文件的状态   
• 读取传进来的表格文件 格式为二进制  read(data, { type: "binary" }) 
• 遍历表格文件里面的sheet  转换成json格式化后  加入到预留的数据 this.tableData 中 
• 获取excel中第一个表格数据tableData[0][0]，并且将表头提取出来

事件完整代码：

      inputFile(e){
      const file = e.target.files[0]
      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = read(data, { type: "binary" });
          const params = [];
          // 取对应表生成json表格内容
          workbook.SheetNames.forEach(item => {
            params.push({
              name: item,
              dataList: utils.sheet_to_json(workbook.Sheets[item])
            });
            this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
          });
          // 该算法仅针对表头无合并的情况
          if (this.tableData.length > 0) {
            // 获取excel中第一个表格数据tableData[0][0]，并且将表头提取出来
            for (const key in this.tableData[0][0]) {
              this.tableHead.push(key);
            }
          }
          return params;
          // 重写数据
        } catch (e) {
          console.log("error:" + e);
          return false;
        }
      };
      fileReader.readAsBinaryString(file);
    }

概念补充：

1：FileReader : 读取文件内容
readAsText() 读取文本文件，(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件，返回二进制字符串
readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件
abort: 中断读取

2：FileReader 提供一个完整的事件模型，用来捕获读取文件的状态
onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发
onloadend:文件读取完毕之后，不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发

————————————————
版权声明：本文为CSDN博主「右想小小怪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42705221/article/details/83750352
————————————————
版权声明：本文为CSDN博主「毛发苍苍」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45629623/article/details/114553555

读取出来的数据：

 模板：

                <table style="width: 100%; line-height: 2">
                  <thead style="background: #f10251; color: white">
                    <tr>
                      <th v-for="x in tableHead">{{x}}</th>
                    </tr>
                  </thead>
                  <tbody id="j">
                    <tr v-for="n in tableData[0]" :key="n['#']">
                      <td v-for="o in tableHead">{{n[o]}}</td>
                    </tr>
                  </tbody>
                </table>