excaljs导入导出xlxs文件的方法

本文只针对excaljs库实现

前言 下载 引入 默认已完成

导出

//由于后端返回的数据是英文属性名加值的形式，
//所以要将值进行映射成zhongwen1
//定义用来映射的对象
 let headers = {
      "设备名称": "deviceName",
      "设备编号": "deviceNumber",
      "规格型号": "specifications",
      "生产厂商": "manufacturer",
      "数量": "num",
      "使用单位": "department",
      "安装地点": "place",
      "使用日期": "useDate",
      "设备状态": "deviceState"
    }
//创建一个新的工作簿表
const workbook  = new ExcelJS.Workbook()
//创建一个新的工作表
const worksheet = workbook.addWorksheet('My Sheet')
//可选  单元格的默认宽度
worksheet.properties.defaultColWidth = 20
//可选  单独设置第五列的宽度
worksheet.getColumn(5).width = 10
//添加表头到工作表
worksheet.addRow(Object.keys(headers))
//将数据填充到工作表  
//导出的时间格式化函数
worksheet.addRows(fromatterData(headers, tableData));
//可选  给每一行设置行高
worksheet.eachRow(row => {
        row.height = 20;
      });
//可选 单独设置某一行的行高
worksheet.getRow(1).height = 25;
// 将工作簿保存到本地文件
workbook.xlxs.writeBuffer().then(buffer=>{
//这行代码创建了一个Blob对象，它基于给定的二进制数据buffer，
//这个二进制数据是一个Excel文件的内容，
//Blob的MIME类型被设置为
//"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"，
//表示这是一种Excel的文件格式。
//一个Blob对象是一个不可变的二进制数据对象，它表示了一段数据，可以通过URL.createObjectURL()方法创建一个URL来访问它。
//在这种情况下，这个Blob对象可以被用来下载Excel文件，或者上传到服务器上进行处理。
    const blob = new Blob([buffer],{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', '下载.xlsx');
    document.body.appendChild(link);
    link.click();
})

  //格式化导出数据函数
    function fromatterData(headers, rwos) {
      return rwos.map(item => {
        return Object.keys(headers).map(key => {
          //判断是否是时间字段
          if (headers[key] == 'useDate') {
            if (item[headers['useDate']] == null) {
              return item[headers[key]]
            } else {
              return formatDate(item[headers[key]])
            }

          }
          return item[headers[key]]
        })
      })
    }

//格式化时间函数  拿来直接用
    function formatDate(date, fmt = 'yyyy-MM-dd') {
      if (!(date instanceof Array)) {
        date = new Date(date)
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (const k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          const str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
        }
      }
      return fmt
    }
    function padLeftZero(str) {
      return ('00' + str).substr(str.length)
    }

导入

//控件借用elemenet的upload 组件
<el-upload
              class="upload-excel"
              style="display: inline-block; margin-right: 1%"
                //文件上传前的函数
              :before-upload="beforeUpload"
                //是否自动上传
              :auto-upload="false"
                //文件发生改变时触发
              :on-change="handleFileUpload"
                //是否显示导入列表
              :show-file-list="false"
            >
              <el-button size="small" type="primary">导入</el-button>
 </el-upload>

//js
function beforeUpload(file) {
      // 只允许上传 .xlsx 文件
      const fileType = file.type
      const validTypes = [
        'application/vnd.ms-excel',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      ]
      if (!validTypes.includes(fileType)) {
        ElMessage.error('只允许上传 .xlsx 文件')
        return false
      }
      return true
    }
//
 async function handleFileUpload(file) {
      const workbook = new ExcelJS.Workbook()
        //FileReader是JavaScript内置的一个API，用于读取文件内容。
        //通过FileReader对象，我们可以异步读取一个File对象或Blob对象中的数据，可以通过FileReader的方法来指定读取数据的格式，如文本、二进制数据等，
        //并且可以注册回调函数来处理读取完成后的结果。
      const reader = new FileReader()
        //FileReader对象提供了多种方法来读取不同格式的文件，包括readAsText()、readAsDataURL()和readAsArrayBuffer()等方法。在这里，我们使用了readAsArrayBuffer()方法来读取一个二进制文件的内容，
        //并将File对象的raw属性作为参数传递给这个方法。
      reader.readAsArrayBuffer(file.raw)
      reader.onload = async () => {
        const buffer = reader.result
            //取一个二进制Excel文件的内容，并将其解析为Workbook对象。
        await workbook.xlsx.load(buffer)
            //rkbook对象的getWorksheet()方法，我们可以根据工作表的名称或索引来获取一个Worksheet对象。
            //获取工作簿中第一个工作表的Worksheet对象
        const worksheet = workbook.getWorksheet(1)
        let newarr = []
        worksheet.eachRow((row, index) => {
            //检查是不是表头行
          if (index > 1) {
            const rowData = {}
             //遍历这一行中的每一个单元格，然后将每个单元格的值存储到一个JavaScript对象中
            row.eachCell((cell, colNumber) => {
                在解析单元格的值时，我们使用headers对象来映射单元格所在的列和JavaScript对象中的属性名。
              const key = Object.keys(headers)[colNumber - 1]
              if (key) {
                rowData[headers[key]] = cell.value
              }
            })

            newarr.push(rowData)
          }
        })
        console.log(newarr)
        //此时的newarr是一个数组对象，传给后端即可
        importExcal(newarr)
      }
    }