2.进阶导出 

  1.导出数据为xlsx表格文件 表格带下拉选择

  原理：主要依赖于 exceljs 包  版本依赖 4.3.0

  下载方式npm install exceljs@4.3.0

  引入方式  import ExcelJS from "exceljs";

<template>

<button @click="exportExcel">导出Excel</button>code>

</template>

<script>

import ExcelJS from "exceljs";

export default {

methods: {

async exportExcel() {

const workbook = new ExcelJS.Workbook();

// 创建一个工作表 elecel里面可以有多个工作表

const worksheet = workbook.addWorksheet("Sheet1");

// 设置创建的工作表的表头

worksheet.getCell("A1").value = "姓名";

worksheet.getCell("B1").value = "年龄";

worksheet.getCell("C1").value = "性别";

worksheet.getCell("D1").value = "来源";

// 添加数据行 一般用于循环我们后端传来的数据设置导出的每一行

worksheet.addRow(["John", 25, "男", "微信"]);

worksheet.addRow(["Jane", 30, "女", "微信"]);

worksheet.addRow(["Tom", 35, "男", "微信"]);

// 设置设置我们的下拉选项的数据列表

const dropdownOptions = ["男", "女"];

const dropdownOptions1 = ["微信", "支付宝", "酷酷酷"];

// 创建我们的第二个工作表用于存放我们下拉菜单的选项

const worksheet2 = workbook.addWorksheet("sheet2");

// 这里设置的是第二个工作表一列一列的展示 看图2

worksheet2.getColumn("A").values = dropdownOptions

worksheet2.getColumn("B").values = dropdownOptions1

// 这里设置的是第二个工作表一行一行的展示 看图3

// worksheet2.addRow(dropdownOptions);

// worksheet2.addRow(dropdownOptions1);

// 注意：-------------解释

// 如果是一行一行的 我们的sheet 的c列关联sheet2的第一行数据的话就要这样写

// formulae: [`=sheet2!$A$1:$Z$1`],

// 第二行就要这样写formulae: [`=sheet2!$A$2:$Z$2`]但是这样的和 他只会写到第二行的A-Z

// 如果一列一列的话 我们的sheet 的c列关联sheet2的第一列数据的话就要这样写

// formulae: [`=sheet2!$A:$A`],

// 如果关联到第二列就要这样写 formulae: [`=sheet2!$B:$B`],

// 性别下拉 这是用来把工作表1中的某一列关联到工作表二中的某一行作为下拉框的值或者是某一列

const col = worksheet.getColumn("C");

// 遍历此列中的所有当前单元格，包括空单元格

col.eachCell({ includeEmpty: true }, function (cell, rowNumber) {

// 设置下拉列表

cell.dataValidation = {

type: "list",

allowBlank: true,

formulae: [`=sheet2!$A:$A`], //行取值

// formulae: [`=sheet2!$A$1:$Z$1`], //列取值

};

});

//来源下拉

const col3 = worksheet.getColumn("D");

// 遍历此列中的所有当前单元格，包括空单元格

col3.eachCell({ includeEmpty: true }, function (cell, rowNumber) {

// 设置下拉列表

cell.dataValidation = {

type: "list",

allowBlank: true,

formulae: [`=sheet2!$B:$B`],//行取值

// formulae: [`=sheet2!$A$2:$Z$2`],//列取值

};

});

// 导出Excel文件

const buffer = await workbook.xlsx.writeBuffer();

const blob = new Blob([buffer], {

type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",

});

const url = URL.createObjectURL(blob);

const link = document.createElement("a");

link.href = url;

link.download = "data.xlsx";

link.click();

URL.revokeObjectURL(url);

},

},

};

</script>

图1：

图2：

图3：