vue3 + vite 的Excel表格的导入导出

yarn add xlsx

或者

npm i xlsx

import * as XLSX from 'xlsx'

let exportData = () => {
    // 1 新建工作簿 XLSX.utils.book_new()
    let workbook = XLSX.utils.book_new()

    // 处理数据
    let newTable = tableData.value.map(item => {
        return {
            ID: item.id,
            姓名: item.name,
            日期: item.date,
            地址: item.address
        }
    })
    // 2 创建工作表
    let workSheet = XLSX.utils.json_to_sheet(newTable)

    // 3 workSheet添加到workbook中
    XLSX.utils.book_append_sheet(workbook, workSheet);

    // 4 下载Excel
    XLSX.writeFile(workbook, '信息表.xlsx', {
        bookType: 'xlsx'
    })
}

let importData = (uploadFile: any) => {

    let file = uploadFile.raw

    // 1 cosnt fileReader=  new FileReader()  Web 应用程序异步读取存储在用户计算机上的文件
    let fileReader = new FileReader()

    // 2 读取文件的内容为二进制
    fileReader.readAsBinaryString(file);

    // 3 fileReader.onload 监听读取文件成功
    fileReader.onload = (e: any) => {
        // console.log(e.target.result);
        // 二进制文件 xlsx.read(数据，配置项)  插件读取文件 生成工作簿
        let workbook = XLSX.read(e.target.result, {
            type: 'binary'
        })
        // console.log(workbook);
        let sheetName = workbook.SheetNames[0];
        let workSheet = workbook.Sheets[sheetName]
        // console.log(workSheet);

        // XLSX.utils.sheet_to_json(工作表) 把工作表转化为json
        let excelDataJson = XLSX.utils.sheet_to_json(workSheet)

        // console.log(excelDataJson);
        tableData.value = excelDataJson.map((item: any) => {
            return {
                id: item.ID,
                name: item.姓名,
                date: item.日期,
                address: item.地址
            }
        })
    }
}