Vue xlsx 表格(excel)导出，导入简单学习

        大家好！我是猫猫，今天讲如何在 Vue 项目中导出，导入的操作。

        首先安装 xlsx

npm install xlsx --save

        页面引入该组件

import xlsx from "xlsx";

        1. 导入操作

        这里引用 element UI 的 el-upload 组件

页面：

<el-upload class="uploadFile" ref="UploadImport" action :auto-upload="false" :show-file-list="false" :on-change="UploadImport" :limit="1">

    <el-button>批量导入</el-button>

</el-upload>

注：limit 表示仅上传一个文件

注：导入成功或者失败都要记得清空已上传的文件列表，不然下次导入事件不会触发

        首先读取文件 excel

// 导入 上传 xlsx 事件

async UploadImport(file) {

    let dataBinary = await ReadFile(file.raw);    // 读取文件

    let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true });

    let workSheet = workBook.Sheets[workBook.SheetNames[0]];

    let data = xlsx.utils.sheet_to_json(workSheet);

    if (data.length == 0)  this.$refs["UploadImport"].clearFiles();    // 清空已上传的文件列表

    if (data.length > 0)  this.handleImport(data);    // data：导入的数据，以数组的形式展示

}

// 读取文件 事件

export const ReadFile = (file) => {

    return new Promise(resolve => {

        let reader = new FileReader();

        reader.readAsBinaryString(file);

        reader.onload = ev => {  resolve(ev.target.result); }

    })

}

// 导入数据处理 事件

handleImport(data) {

    // ... 处理数据

    // 注：清空已上传的文件列表，不然下次点击导入按钮不会触发事件

    this.$refs["UploadImport"].clearFiles(); 
}

            2. 导出操作

// 导出 事件

// example: xlsxData = [[], []...]

let xlsxData = [["序号", "名称", "时间"]];

let worksheet = xlsx.utils.aoa_to_sheet(xlsxData);

let workBook = xlsx.utils.book_new();

xlsx.utils.book_append_sheet(workBook, worksheet, "全部");    // 第三个参数可选，是工作表名称

xlsx.writeFile(workBook, "表格.xlsx");    // 第二个参数的后缀名有其他格式可供选择（xls, csv）

// 注：如需要多个工作表，则新增 worksheet，如下

let xlsxData_1 = [["序号", "名称", "时间"]];

let worksheet_1 = xlsx.utils.aoa_to_sheet(xlsxData_1);

let workBook = xlsx.utils.book_new();

xlsx.utils.book_append_sheet(workBook, worksheet_1, "第一页");    // 第三个参数可选，是工作表名称

let xlsxData_2 = [["序号", "名称", "时间"]];

let worksheet_2 = xlsx.utils.aoa_to_sheet(xlsxData_2);

xlsx.utils.book_append_sheet(workBook, worksheet_2, "第二页");    // 第三个参数可选，是工作表名称

xlsx.writeFile(workBook, "表格.xlsx");    // 第二个参数的后缀名有其他格式可供选择（xls, csv）

        3. 下载操作

// 以 vue 项目为例子，在 static 文件夹下创建了 template 文件夹，存放模板.xlsx

window.open("/static/template/模板.xlsx");