快捷简单的Exml 表格导出功能

快捷简单的Exml 表格导出功能

下载插件

npm install exceljs
or
yarn add exceljs

封装方法

exportToExcel (data, fileName) {
      const workbook = new ExcelJS.Workbook()
      const worksheet = workbook.addWorksheet('Sheet1')
      // 添加表头（如果有的话）
      const headerRow = Object.keys(data[0] || {})
      worksheet.addRow(headerRow)
      // 将数据添加到工作表
      data.forEach(rowData => {
        worksheet.addRow(Object.values(rowData))
      })
      // 保存工作簿为文件
      workbook.xlsx.writeBuffer()
        .then(buffer => {
          const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          const url = window.URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = url
          a.download = fileName + '.xlsx'
          document.body.appendChild(a)
          a.click()
          window.URL.revokeObjectURL(url)
          document.body.removeChild(a)
        })
        .catch(error => {
          console.error('Error exporting to Excel:', error)
        })
    },

函数调用

/** 导出按钮操作 */
    handleExport () {
      console.log(this.householdList) //数据
      //传递数据及文件名称
      this.exportToExcel(
        this.householdList,
        `household_${new Date().getTime()}`
      )
    },

如果要改表头在这里修改

// 添加表头
 const headerRow = [
    "住户姓名",
    "所属台区",
    "所属楼宇",
    "单元",
    "房屋号",
    "住户类别",
    "年龄",
    "孤寡老人",
    "联系电话",
    "籍贯",
    "疫苗接种",
    "备注",
]
//使用默认字段名
const headerRow = Object.keys(data[0] || {})

功能实现，适用于普通数据表格导出，简单的表格导出功能，所有后台管理系统均可适配。如有更复杂的需求可评论留言，以及其他问题可留言讨论！感谢点赞收藏，🙏