How to use xlsx in Vue

npm install xlsx -S

/* Read file */
export const readFile = (file) => {
  return new Promise(resolve => {
    let reader = new FileReader()
    (file)
     = ev => {
      resolve()
    }
  })
}

<template>
 <el-upload
            ref="uploadRef"
            class="upload-demo"
            action=""
            accept=".csv"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleUploadChange"
        >
          <el-button round icon="upload" type="primary" >Import</el-button>
        </el-upload>
</template>
<script>
import * as XLSX from 'xlsx'
import { readFile } from '../../utils/xlsx'
export default {
  data() {
    return {
    }
  },
  methods: {
    async handleUploadChange(file) {
      let dataBinary = await readFile();
      let workBook = (dataBinary, { type: 'binary', cellDates: true })
      let workSheet = [[0]]
      const data = .sheet_to_json(workSheet)
      (data)//You can already get the converted json here}
</script>```

npm install [email protected] [email protected] --save

import fs from 'file-saver'
import * as XLSX from 'xlsx'
export function xlsx(json, fields, filename = '.xlsx') {//Export xlsx  (item => {
    for (let i in item) {
      if ((i)) {
        item[fields[i]] = item[i];
      }
      delete item[i]; //Delete the original object attribute    }
  })
  let sheetName = filename //Excel file name  let wb = .book_new()  //The workbook object contains a SheetNames array and a table object maps the table name to the table object.  The .book_new utility creates a new workbook object.  let ws = .json_to_sheet(json, { header: (fields) }) //Convert JS object array to worksheet.  (sheetName)
  [sheetName] = ws
  const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//Set the style of the table  let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //Written style  let wbout = (wb, wopts)
  let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  (blob, filename + '.xlsx')
}
const s2ab = s => {
  var buf;
  if (typeof ArrayBuffer !== 'undefined') {
    buf = new ArrayBuffer()
    var view = new Uint8Array(buf)
    for (var i = 0; i != ; ++i) view[i] = (i) & 0xff
    return buf
  } else {
    buf = new Array();
    for (var i = 0; i != ; ++i) buf[i] = (i) & 0xFF;
    return buf;
  }
}

<template>
  <div >
    <div><el-button type="success" @click="outExcel">Exportexcel</el-button></div>
    <el-table
    :data="jsonData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="Student Number"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="age">
    </el-table-column>
      <el-table-column
      prop="classes"
      label="College">
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
import {xlsx} from './utils/xlsx'
export default {
  data() {
    return {
      jsonData:[{
        id:'1',
        name:'Xiaozhi',
        age:18,
        classes:'Business School'
      },
      {
        id:'2',
        name:'noob',
        age:19,
        classes:'Business School'
      },
      {
        id:'3',
        name:'Little Blue',
        age:12,
        classes:'Business School'
      },
      {
        id:'4',
        name:'Little Flower',
        age:14,
        classes:'Business School'
      },
      {
        id:'5',
        name:'Little Pink',
        age:15,
        classes:'Business School'
      },
      {
        id:'6',
        name:'Little Yellow',
        age:16,
        classes:'Business School'
      },
      {
        id:'7',
        name:'Little Red',
        age:17,
        classes:'Business School'
      },
      {
        id:'8',
        name:'Little Black',
        age:19,
        classes:'Business School'
      },
      ],
      listHander:{
        id:'Student number',
        name:'Name',
        age:'age',
        classes:'College'
      }
    }
  },
  methods: {
    outExcel(){
        // It is the data content (the content in the table) to be exported,        // The corresponding header of the content to be exported        // Student: Pointing to the excel file name      xlsx(,,'student')
    }
  },
}
</script>
<style>
</style>