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

　　一、安装XLSX插件

yarn add xlsx

或者

npm i xlsx

　　二、引入插件

　　　　在你需要的页面或者在main.js中引入

import * as XLSX from 'xlsx'

　　三、导出Excel

　　　　3.1 核心api

　　　　　　① xlsx.utils.book_new()  新建工作簿

　　　　　　② xlsx.utils.json_to_sheet(json数组)创建工作表 json格式

　　　　　　③ xlsx.utils.aoa_to_sheet(二维数组)创建工作表 数组格式

　　　　　　④ xlsx.utils.book_append_sheet(工作簿, 工作表)

　　　　　　⑤ xlsx.writeFile(工作簿,名称,配置项) 下载生成的excel

　　　　3.2 实现示例代码

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'
    })
}

　　四、导入Excel

　　　　4.1 核心api

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

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

　　　　　　③ fileReader.onload 监听读取文件成功

　　　　　　④ xlsx.read(数据，配置项) 插件读取文件 生成工作簿

　　　　　　⑤ xlsx.utils.sheet_to_json(工作表) 把工作表转化为json

　　　　4.2 实现示例代码

　　　　

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.地址
            }
        })
    }
}

　　

 　　注：该文档为个人理解所写，有误可建议修改