vue 实现excel本地预览

 安装npm依赖

npm i xlsx -S

   1、点击button 打开上传文件页面

 2、解析数据

 3、完整代码

<template>
  <div class="excel-wrapper">

    <!-- 上传按钮 -->
    <input class="input-file"
           type="file"
           @change="exportData"
           style="display:none"
           accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
    <el-button type="success"
               size="small"
               @click="btnClick">上传excel</el-button>
    <!-- END -->

    <!-- 表格 -->
    <el-table :data="tableData"
              style="width: 100%"
              height="450"
              size="mini">
      <el-table-column :prop="item"
                       :label="item"
                       width="140"
                       v-for="(item,index) in checkboxTableColumn"
                       :key="'column'+index">
      </el-table-column>
    </el-table>
    <!-- END -->

    <!-- 分页 -->
    <el-pagination v-if="excelData != 0"
                   @size-change="handleSizeChange"
                   @current-change="CurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10, 20, 30,40,50,100,200,500]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
    <!-- END -->

  </div>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
  data() {
    return {
      //所有键的值
      columnHeader: [],

      // 导入的excel的数据
      excelData: [],

      // 表格显示列
      checkboxTableColumn: [],

      //表格数据
      tableData: [],

      // 当前分页
      currentPage: 1,

      // 每页显示数量
      pageSize: 10,

      // 数据总数
      total: 0,
    }
  },

  methods: {
    // 将上传input框点击事件改为按钮
    btnClick() {
      document.querySelector('.input-file').click()
    },

    // 解析excel
    exportData(event) {
      if (!event.currentTarget.files.length) {
        return
      }
      const that = this
      // 拿取文件对象
      let f = event.currentTarget.files[0]
      //这里已经拿到了excel的file文件，若是项目需求，可直接$emit丢出文件
      // that.$emit('getMyExcelData',f);
      // 用FileReader来读取
      let reader = new FileReader()
      // 重写FileReader上的readAsBinaryString方法
      // FileReader.prototype.readAsBinaryString = function(f) {
      //   let binary = "";
      //   let wb; // 读取完成的数据
      //   let outdata; // 你需要的数据
      //   let reader = new FileReader();
      reader.onload = function (e) {
        // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
        // let bytes = new Uint8Array(reader.result);
        // let length = bytes.byteLength;
        // for (let i = 0; i < length; i++) {
        //   binary += String.fromCharCode(bytes[i]);
        // }
        var data = e.target.result
        // 接下来就是xlsx
        var wb = XLSX.read(data, {
          type: 'buffer',
        })
        var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
        // 导出格式为json，{表数据：[]}
        console.log(outdata)
        that.excelData = outdata
        that.tableData = outdata.slice(0, 10)
        that.total = outdata.length

        // 获取数据的key
        var importDataThead = Array.from(Object.keys(outdata[0])).map(
          (item) => {
            return item
          }
        )

        that.columnHeader = importDataThead
        that.checkboxTableColumn = importDataThead.slice(0, 9)
        console.log(importDataThead)
      }
      reader.readAsArrayBuffer(f)
      // };
      // reader.readAsBinaryString(f);
    },

    // 分页切换
    CurrentChange(val) {
      this.currentPage = val

      this.tableData = this.excelData.slice(
        (val - 1) * this.pageSize,
        val * this.pageSize - 1
      )
    },
    // 每页显示数量改变
    handleSizeChange(val) {
      this.pageSize = val
      this.tableData = this.excelData.slice(
        (this.currentPage - 1) * val,
        this.currentPage * val - 1
      )
    },
  },
}
</script>
<style  scoped>
.excel-wrapper {
  /* height: 100vh; */
  /* width: 600px; */
  overflow: scroll;
  background: rgb(226, 226, 226);
  padding: 20px;
}
</style>

仅用于记录

作者gitee地址：src/App.vue · 王佳斌/（Vue）本地上传 Excel 文件页面表格预览（配合 ElementUI 带分页） - Gitee.com