读取 excel 表格

安装 xlsx

1
npm install xlsx --save-dev

引入插件

1
import * as xlsx from "xlsx/xlsx.mjs";

读取 excel 表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  <form ref="fileRef">
    <input
      type="file"
      ref="upload"
      accept=".xls,.xlsx"
      @change="readExcel"
      class="upload-button" />
    <span class="tips">支持扩展名：.xls .xlsx，且不超过100M</span>
  </form>
</template>

<script>
import * as XLSX from 'xlsx/xlsx.mjs'
export default {
  methods: {
    readExcel(e) {
      const files = e.target.files
      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
        console.log(123)
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary',
          }) // 读取数据
          const wsname = workbook.SheetNames[0] // 取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
          // const ws1 = XLSX.utils.sheet_to_slk(workbook.Sheets[wsname]) // 输出表格对应位置是什么值
          // const ws2 = XLSX.utils.sheet_to_html(workbook.Sheets[wsname]) // 生成HTML输出
          // const ws3 = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]) // 生成分隔符分隔值输出
          // const ws4 = XLSX.utils.sheet_to_formulae(workbook.Sheets[wsname]) // 生成公式列表（具有值回退）
          // const ws5 = XLSX.utils.sheet_to_txt(workbook.Sheets[wsname]) // 生成UTF16格式的文本
          // const ws = xlsx.utils.sheet_to_json(workbook.Sheets[wsname], {header: 1,defval: ""}); // 生成json表格内容
          console.log(ws)
          this.$refs.fileRef.reset() // 清空form
        } catch (e) {
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
    },
  },
}
</script>

导出 excel 表格

1.引入依赖：

1
npm install xlsx@0.17.0 file-saver@2.0.5 --save

注：xlsx 要指定版本不然会报错

2.封装导出的 js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import fs from 'file-saver'
import XLSX from 'xlsx'

export function xlsx(json, fields, filename = '.xlsx') {
  //导出xlsx
  json.forEach((item) => {
    for (let i in item) {
      if (fields.hasOwnProperty(i)) {
        item[fields[i]] = item[i]
      }
      delete item[i] //删除原先的对象属性
    }
  })
  let sheetName = filename //excel的文件名称
  let wb = XLSX.utils.book_new() //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
  let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //将JS对象数组转换为工作表。
  wb.SheetNames.push(sheetName)
  wb.Sheets[sheetName] = ws
  const defaultCellStyle = {
    font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    fill: { fgColor: { rgb: 'FFFFAA00' } },
  } //设置表格的样式
  let wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
    cellStyles: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false,
  } //写入的样式
  let wbout = XLSX.write(wb, wopts)
  let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename + '.xlsx')
}

const s2ab = (s) => {
  var buf
  if (typeof ArrayBuffer !== 'undefined') {
    buf = new ArrayBuffer(s.length)
    var view = new Uint8Array(buf)
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
    return buf
  } else {
    buf = new Array(s.length)
    for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff
    return buf
  }
}

3.在用导出的文件里引入 xlsx.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<template>
  <div id="app">
    <div><el-button type="success" @click="outExcel">导出excel</el-button></div>
    <el-table :data="jsonData" stripe style="width: 100%">
      <el-table-column prop="id" label="学号" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="classes" label="学院"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { xlsx } from './utils/xlsx'

export default {
  data() {
    return {
      jsonData: [
        {
          id: '1',
          name: '小智',
          age: 18,
          classes: '商学院',
        },
        {
          id: '2',
          name: '小白',
          age: 19,
          classes: '商学院',
        },
        {
          id: '3',
          name: '小蓝',
          age: 12,
          classes: '商学院',
        },
        {
          id: '4',
          name: '小花',
          age: 14,
          classes: '商学院',
        },
        {
          id: '5',
          name: '小粉',
          age: 15,
          classes: '商学院',
        },
        {
          id: '6',
          name: '小黄',
          age: 16,
          classes: '商学院',
        },
        {
          id: '7',
          name: '小红',
          age: 17,
          classes: '商学院',
        },
        {
          id: '8',
          name: '小黑',
          age: 19,
          classes: '商学院',
        },
      ],
      listHander: {
        id: '学号',
        name: '姓名',
        age: '年龄',
        classes: '学院',
      },
    }
  },
  methods: {
    outExcel() {
      // this.jsonData是要导出的数据内容（表格里的内容），
      // this.listHander对应要导出内容的表头
      // 学生：指向的是excel文件名
      xlsx(this.jsonData, this.listHander, '学生')
    },
  },
}
</script>

<style></style>