vue+antd+ts实现前端解析Excel文件 上传 下载

上传

需求背景：
点击上传词库需要将excel内容解析到文本框中（前端解析，不经过后端处理）

实现方法

1. 下载插件包 pnpm i xlsx
2. 上传组件如下

<a-upload 
	:showUploadList="false" 
	:before-upload="beforeUpload" 
	accept=".xlsx, .xls" 
	class="upload-keywords">
    <a-button>
    	<upload-outlined />上传词库
    a-button>
a-upload>

3. 读取excel

import * as XLSX from 'xlsx'

// 读取excel
export const handleReadExcel = (file) => {
  const fileReader = new FileReader()
  return new Promise((resolve) => {
    fileReader.onload = (ev) => {
      let snArr
      try {
        const fileData = (ev.target as any).result
        const workbook = XLSX.read(fileData, {
          // 以二进制流方式读取得到整份excel表格对象
          type: 'binary',
        })
        const wsname = workbook.SheetNames[0] // 取第一张表
        snArr = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
      } catch (e) {
        console.log('errr', e)
      }
      resolve(snArr)
    }
    fileReader.readAsBinaryString(file)
  })
}

4. 上传回调函数

const beforeUpload = async (file) => {
    const content = (await handleReadExcel(file)) as Array<any>
    content.map((item) => {
      if (formState.tag_rule_type === 0) {
        // 正则
        formState.tag_rule.push(Object.values(item)[0])
      } else {
        // 关键字
        formState.inputTestContent += ' ' + Object.values(item)[0]
      }
    })
    return false
  }

效果

下载

1. 生成excel

export const generateExcel = (data, filename) => {
  // 创建工作簿 workbook
  const workbook = XLSX.utils.book_new()
  // 添加工作表 worksheet
  const worksheet = XLSX.utils.aoa_to_sheet(data)
  XLSX.utils.book_append_sheet(workbook, worksheet)
  // 生成 xlsx 文件数据
  XLSX.writeFile(workbook, `${filename}.xlsx`)
}

2. antd 组件

  <a-button @click="downloadTemplate">
      <download-outlined />
       下载导入模板
  a-button>

3. 点击事件

 const downloadTemplate = () => {
    // 设置表头名称
    const list = [['内容']]
    const filename = '自定义词库模板'
    generateExcel(list, filename)
  }