vue3:实现Excel文件的上传和下载

在管理系统项目中，Excel文件的上传和下载是比较常见的需求，可用于批量导入和导出数据。前端实现方式：
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。

xlsx.js 是一个用来转换 BASE64 编码的 XLSX 文件数据为 JavaScript 对象，也支持 JavaScript 对象到 XLSX 数据的转换。前端使用 xlsx.js 来解析 Excel，把解析后的数据根据服务器需要的格式进行处理后上传给服务器，可以减少服务器的处理工作，在并发量大的时候，把数据处理放大前端，是有利于服务器性能。

安装

npm install xlsx 
#or
yarn add xlsx

使用

提取excel文件的内容，转成json格式数据，前端可以更好的处理json数据。

# 导入
import * as XLSX from 'xlsx'
// 读取excel文件流转成json
const readExcelToJson = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = (e) => {
      if (e.target != null && e.target.result instanceof ArrayBuffer) {
        // data为readAsBinaryString转成的值，所以type需要保持一致
        const data = new Uint8Array(e.target.result)
        // 返回的datajson为WordBook对象
        const workbook = XLSX.read(data, { type: 'array' })
        // 将Excel 第一个sheet内容转为json格式
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]
        const json = XLSX.utils.sheet_to_json(worksheet)
        resolve(json)
      }else {
        reject('')
      }
    }
    // 读取文件为二进制格式
    reader.readAsArrayBuffer(file)
  })
}

xlsx.js 也支持把 JS 对象转成 XLSX 数据，前端可以根据需求，将json数据整理成excel格式，并下载到本地。

const downloadFileClick = () => {
  console.log('下载模板，调用下载接口')
  const arr: any[] = []
  arr[0] = ['oldFileName', 'newFileName']
  //创建一个新的工作表
  const workBook = XLSX.utils.book_new() 
  //将表格转换为工作表
  const worksheet = XLSX.utils.aoa_to_sheet(arr) 
  //将工作表添加到workBook中
  XLSX.utils.book_append_sheet(workBook, worksheet, 'Sheet 1') 
  XLSX.writeFile(workBook, 'example.xlsx')
}