纯前端Excel导出（无操作列表）

使用的是 Element + XLSX

一、安装依赖

1.首先安装依赖

npm install xlsx --save

xlsx：电子表格解析器

2.引入依赖

import XLSX from 'xlsx'

二、导出无操作列的Excel

1.创建导出按钮

<el-button icon="el-icon-download" @click="exportExcel">导出Excel</el-button>

2.导出时不要操作列

        思路是直接获取后端传过来的数据，从而去选择出想要导出的数据，而不是从<el-table>里面去导出

        比如后端传来的数据是

tableData:[
  {
    "name": "张三",
    "age": 18,
    "gender": "男"
    "class":"一班"
  },
  {
    "name": "李四",
    "age": 20,
    "gender": "女"
    "class":"二班"
  }
]

        如果导出时不需要age字段导出，便可以不写age

exportExcel(){
        //构造要导出的数据结构
        const exportData = this.tableData.map(item => {
          return {
            '姓名': item.name,
            '性别': item.garden,
            '班级': item.class,
          }
        })

        // 将数据转换为 worksheet 对象
        const worksheet = XLSX.utils.json_to_sheet(exportData)

        // 将 worksheet 对象添加到 workbook 中
        const workbook = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

        // 导出 Excel 文件
        XLSX.writeFile(workbook, '学生信息.xlsx')

      },

  以上就是导出无操作列的内容了，代码可直接复制粘贴使用。

注：此导出只可以导出当前页面的数据，如果需要导出全部的数据，就需要后端写一个查询全部数据的接口来提供数据，从而使其导出全部数据。