excel的导入导出

excel的导入导出

一、导入

1、导入逻辑

• 静态页面需有选择文件的控件，选择excel
• excel被选择后，使用js的API读取文件内容
• 将读取到的内容转换成可展示的数据，渲染在页面中

2、代码

示例使用的是element-plus的上传控件选择文件：

<el-upload
    class="upload-demo"
    action
    :onchange="onchange"
    accept=".xlsx,.xls"
    :auto-upload="false"
    :show-file-list="false"
>
    <el-button size="small" type="primary">导入</el-button>
</el-upload>

action为空，表示没有提交方法，因为文件并不是真正上传，只是选择而已，不需要提交

auto-upload为false，表示不自动上传，所以也没有设置上传的地址

show-file-list为false，表示不自动展示所有选择的文件列表，因为选择文件后就会执行事件，并将表格内容展示在页面中，不需要展示选择的文件的列表

事件函数：

// file是当前选择的文件，fileList是所有选择的文件组成的数组
onChange(file, fileList) {
    // console.log(file, fileList);
    // file.raw是文件数据 - 可以读取的文件数据
    // console.log(file.raw);
    // FileReader是js内置的读取文件的构造函数
    let reader = new FileReader();
    // 异步按字节读取文件内容，结果为文件的二进制串
    reader.readAsBinaryString(file.raw);
    // 读取结束后会执行的事件
    reader.onload = (ev) => {
        // console.log(ev.target.result); // 读取到的结果
        // console.log('-----------------------------------');
        // console.log(reader.result); // 读取到的结果
    };
},

事件函数参数参考element-plus

FileReader是H5新增的API，用于读取文件

用第三方插件xlsx解析读取到的数据，才可以转成js所能识别的数据：

npm i xlsx

导入模块并解构出需要使用的函数：

import {read, utils} from 'xlsx'    

使用解构出的函数解析数据并处理：

// 读取文件的二进制数据
let workbook = read(文件二进制数据, { type: "binary" })
// console.log(workbook); // 读到excel对象
// 遍历excel对象中所有的工作表 - 一个excel可能会有多个工作表
workbook.SheetNames.forEach((item, index) => {
    // 获取工作表数据
    let worksheet = workbook.Sheets[item];
    //把工作表数据转化为json数据格式
    let data = utils.sheet_to_json(worksheet);
    // console.log(data);
    // 如果能读取到数据
    if(data.length) {
        // 将数据转成可以在table中显示的数据 - 并赋值给当前组件中的tableData
        tableData.value = data.map(v => {
            return {
                year: v.毕业年份,
                number: v.毕业人数,
            }
        })
    }
})

将解析并转换后得到的tableData数据渲染到页面的表格中：

<el-table
    :data="tableData"
    style="width: 100%"
>
    <el-table-column
        prop="year"
        label="毕业年份"
        width="180"
    >
    </el-table-column>
    <el-table-column
        prop="number"
        label="毕业人数"
        width="180"
    >
    </el-table-column>
</el-table>

二、导出

1、导出逻辑

• 页面中根据响应式数据渲染一个表格
• 将表格数据转成excel需要的数据
• 创建excel工作表，将excel数据写入工作表中
• 将这个excel下载到本地

2、代码

表格展示：

<el-button type="success" @click="tableExport">导出</el-button>
    <el-table
        :data="tableData"
        style="width: 100%"
    >
    <el-table-column
        prop="year"
        label="毕业年份"
        width="180"
    >
    </el-table-column>
    <el-table-column
        prop="number"
        label="毕业人数"
        width="180"
    >
    </el-table-column>
</el-table>

定义按钮点击事件函数，函数中将excel导出，导出excel需要依赖第三方插件xlsx

import {utils, writeFile} from 'xlsx'
const tableExport = () => {
    // 将表格数据转成excel数据
    let arr = this.tableData.map(item => {
        return {
            '毕业年份': item.year,
            '毕业人数': item.number
        }
    })
    // console.log(arr);
    // 将json转为excel数据
    let sheet = utils.json_to_sheet(arr);
    // 创建一个新的 Excel 工作簿对象它返回一个空白的工作簿，可以向其中添加工作表和单元格数据
    let book = utils.book_new();
    // 给excel添加一个工作簿，并放上数据
    utils.book_append_sheet(book, sheet, "毕业统计");
    // 将工作簿下载到本地
    writeFile(book, `毕业统计.xls`);
}