<纯前端>excel导入与导出（vue2/vue3）

vue2导出：

//main.js 导包注册
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
//组件调用
<download-excel
        class="export-excel-wrapper"
        :data="list"
        :fields="json_fields"
        header="楼宇列表"
        name="楼宇列表.xls"
      >
        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
        <el-button type="success">导出当前页</el-button>
      </download-excel>
      
      //data数据
      //表头与key
         json_fields: {
        '楼宇名称': 'name',
        '楼宇层数': 'floors',
        '楼宇面积': 'area',
        '楼宇物业费': 'propertyFeePrice'

      },
      //key与value
      list:[]//接口返回的数据

vue3导入/导出excel：

       // import * as xlsx from 'xlsx/xlsx.mjs'
        
      //导入
      //input-type为file获得file
      
      const fileName = file
      // 文件读取方法实例化
      const reader = new FileReader()
      // 用2进制读取file，结果封装在onload方法接收的e里(e.target.result)
      reader.readAsBinaryString(fileName)
      // onload在文件被读取时自动触发
      reader.onload = e => {
        try {
          // workbook存放excel的所有基本信息
          const workbook = xlsx.read(e.target.result, {
            type: 'binary',
            cellDates: true,
            dateNF: 'yyyy-mm-dd' // 将日期格式化为yyyy-MM-dd的形式
          })
          // 定义sheetList中存放excel表格的sheet表，就是最下方的tab
          const sheetList = workbook.SheetNames // 工作表名称集合
          sheetList.forEach(name => {
            // 生成工作表名称集合
            const worksheet = workbook.Sheets[name] // 只能通过工作表名称来获取指定工作表
            const results = xlsx.utils.sheet_to_row_object_array(worksheet, {
              raw: false
            }) // XLSX解析工作表信息

            console.log(results)// 这里results就是我们要拿到的信息
          })
        } catch (error) {
          console.dir(error)
          this.$message.warning('文件类型不正确！')
        }
      }
      
      
      //导出
      const res = await getBuildingListAPI(this.form)
      const tableHeader = ['name', 'floors', 'area', 'propertyFeePrice', 'status']
      // 准备sheet数据
      const sheetData = res.rows.map((item) => {
        const obj = {}
        tableHeader.forEach(key => {
          obj[key] = item[key]
        })
        return obj
      })
      // 创建1个sheet
      const worksheet = utils.json_to_sheet(sheetData)
      // 创建1个book
      const workbook = utils.book_new()
      // 把sheet添加到book
      utils.book_append_sheet(workbook, worksheet, 'Data')
      // 自定义表头
      utils.sheet_add_aoa(worksheet, [['楼宇名称', '层数', '在管面积(㎡)', '物业费(㎡)', '状态']], { origin: 'A1' })
      writeFileXLSX(workbook, '楼宇列表.xlsx')

vue3导入代码块来源：blog.csdn.net/u011295864/…