纯前端实现表格中的数据导出功能-使用xlsx和file-saver

原创已于 2025-01-21 16:57:13 修改 · 355 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-01-21 16:27:07 首次发布

通过npm导入XLSX和file-saver包通过import导入

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

//导出excel--（导出描述和显示值列）
exportEvent() {
  const downloadData = []
  this.tableData.forEach(item => {
    downloadData.push({
      '描述': item.description,
      '显示值': item.yValue,
      '导出时间':this.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
    })
  })
  this.downloadExcel(downloadData)
},
//下载表格数据
downloadExcel(downloadData) {
  const worksheet = XLSX.utils.json_to_sheet(downloadData)
//创建工作簿并且添加工作表
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  //设置列宽
  const columnWidths = [
  { wch: 20 }, // 第一列宽度为20个字符宽度
  { wch: 10 }, // 第二列宽度为10个字符宽度
  { wch: 25 }  // 第三列宽度为25个字符宽度
  // 根据需要添加更多列宽配置
]
// 将列宽应用到工作表中
if (worksheet['!cols'] == null) worksheet['!cols'] = []
worksheet['!cols'] = columnWidths


//将工作簿转未Blob对象
  const excelBuffer = XLSX.write(workbook, {
    bookType: 'xlsx',
    type: 'array'
  })
  const blob = new Blob([excelBuffer], { type: 'application/vnd.ms-excel' })
  FileSaver.saveAs(blob, '表名') // 下载文件 文件名
}