表格导入导出（下载）

1.表格处理需要安装 xlxs 插件

npm i xlsx@0.16.9    // 注意版本兼容性

2. 表格导入概念：

excel表格的导入就是能够将excel表格中的数据批量提交到服务端进行储存，第一种是将表格数据处理成可以在应用中预览的对象数组格式，然后提交到服务端；第二种是可以不做预览数据格式转换处理，直接提交给服务端做文件上传处理。

两种处理流程如下图：

2.1. 前端处理数据在上传

        获取二进制文件数据 ====> 转换成对象数组格式 ====> 前端页面展示 ====> 将处理后的数据发给服务端 ====> 数据库

2.2. 前端不处理直接上传，后端处理数据

        获取二进制文件数据  ====> （formData）将二进制数据发送给服务端 ====> 后端处理二进制数据 ====> 数据库

2.3 代码实现 ：

    // 1.使用FileReader获取原生二进制数据
    export function readFile(file) {
        return new Promise(resolve => {
                let reader = new FileReader()
                reader.readAsBinaryString(file) // 把当前文件以二进制进行读取
                reader.onload = ev => {
                    // 读完返回文件数据
                    resolve(ev.target.result)    
                }
        })        
    }
    let binayData = await readFile(file.raw)

    // 2.使用xlxs插件实现二进制数据转换==>JSON
    let sheetBinaryData = xlsx.read(binayData, { type: "binary" })
    let sheetData = sheetBinaryData.Sheets[sheetBinaryData.SheetNames[0]]
    let sheetJsonData = xlsx.utils.sheet_to_json(sheetData)
    // 3.将表格数中中文key===>英文（数据库同步）{"管理员姓名":"李四"}
    {"username":"李四"}
    let userCharacter = {
        username: {
            text: '管理员姓名',
            type: 'string'
        },
        password: {
            text: '管理员密码',
            type: 'string'
        },
        status: {
            text: '管理员状态',
            type: 'number'
        },
        roleid: {
            text: '管理员角色',
            type: 'number'
        }
    }
    let Data = sheetJsonData.map((item, index) => {
        let obj = {}
        for (let key in userCharacter) {
            // 解构获取text健名 通过健名获取sheet表格中的记录值
            let { text, type } = chart[key]
            let value = item[text]
            // 转换value值的类型
            type == "string" ? value = String(value) : ""
            type == "number" ? value = Number(value) : ""
            obj[key] = value
        }
        return obj
    })
    // 4.将处理完的数据赋值页面展示即可 拼接多个数据数据
    this.tableData = this.tableData.concat(Data)

    // 第二种方式直接存储文件原生数据 直接提交给服务端
    this.file = file.raw;

3. 表格导出（下载）概念：

将应用表格中的数据以excel表格的形式导出下载到用户的本地

3.1代码实现：

    // 将数据中的key转换成中文
    let array = this.selectData.map((item) => {
        return {
            "管理员姓名": item.username,
            "管理员密码": item.password,
            "管理员状态": item.status
        }
    })
    // 通过xlsx实现表格数据转换excel下载到用户浏览器本地
    let sheetData = xlsx.utils.json_to_sheet(array)
    let book = xlsx.utils.book_new()//构建excel表
    xlsx.utils.book_append_sheet(book, sheetData, '管理员信息')//将数据放到表中
    xlsx.writeFile(book, `user${new Date().getTime()}.xls`)//生成excel表

4.使用xlxs注意 xlxs不只是能够导入导出表格数据，还能通过其内部的方法设置表格的样式，比如表头高度、字体颜色等等