纯前端实现Excel表格导出功能

在前端开发中，有时需要将数据导出为Excel表格。本文将介绍如何使用纯前端技术实现这一功能，包括安装必要的插件、封装公共导出功能，并详细解释实现步骤。

1. 安装所需插件

首先，我们需要安装三个插件：xlsx、file-saver和xlsx-style-medalsoft。这些插件分别用于处理Excel文件的生成、保存以及样式的支持。


npm install xlsx@0.16.8  
npm install file-saver  
npm install xlsx-style-medalsoft
npm install xlsx@0.16.8  
npm install file-saver  
npm install xlsx-style-medalsoft
npm install xlsx@0.16.8  
npm install file-saver  
npm install xlsx-style-medalsoft

2. 封装公共导出功能

接下来，我们在项目的utils文件夹下的tools.js文件中封装一个公共的导出功能。这个函数将接收一个配置对象，包括要导出的表格DOM选择器、文件名、列宽和行名等参数。


import FileSaver from "file-saver";  
import XLSX from "xlsx";  
import XLSXStyle from "xlsx-style-medalsoft"; // 注意：这里使用的是xlsx-style-medalsoft插件，它提供了对Excel样式的支持  
  
const OMS = {};  
  
// 导出Excel函数 - 单表格Excel带样式  
OMS.downLoadXlsx = ({  
  dom = "el-table", // 表格的DOM选择器，默认为"el-table"  
  name = "文件", // 导出的Excel文件名，默认为"文件"  
  ColumnWdth = [], // 列宽数组，默认为空数组  
  rowName = null, // 行名（表头），如果为null则不设置  
  // ...其他可能的配置参数  
}) => {  
  // 获取表格DOM元素  
  const table = document.querySelector(dom);  
  if (!table) {  
    console.error("未找到指定的表格DOM元素");  
    return;  
  }  
  
  // 将表格转换为工作簿  
  const workbook = XLSXStyle.utils.table_to_book(table, { sheet: "Sheet1" });  
  
  // 设置列宽（可选）  
  if (ColumnWdth.length > 0) {  
    const worksheet = workbook.Sheets["Sheet1"];  
    ColumnWdth.forEach((width, index) => {  
      if (worksheet["!cols"]) {  
        worksheet["!cols"][index] = { wch: width }; // 设置列宽，单位为字符宽度  
      } else {  
        worksheet["!cols"] = [{ wch: width }]; // 初始化列宽数组  
        if (index > 0) {  
          // 对于非第一列，需要添加空列宽对象以保持索引一致  
          for (let i = 1; i < index; i++) {  
            worksheet["!cols"].push({});  
          }  
        }  
      }  
    });  
  }  
  
  // 设置行名（可选）  
  if (rowName) {  
    // 这里可以添加设置行名的代码，但通常行名已经包含在表格的表头中  
    // 如果需要额外处理，可以在此添加逻辑  
  }  
  
  // 生成Excel文件并保存  
  const excelBuffer = XLSXStyle.write(workbook, {  
    bookType: "xlsx",  
    type: "array",  
  });  
  const blob = new Blob([excelBuffer], { type: "application/octet-stream" });  
  FileSaver.saveAs(blob, `${name}.xlsx`);  
};  
  
export default OMS;
import FileSaver from "file-saver";  
import XLSX from "xlsx";  
import XLSXStyle from "xlsx-style-medalsoft"; // 注意：这里使用的是xlsx-style-medalsoft插件，它提供了对Excel样式的支持  
  
const OMS = {};  
  
// 导出Excel函数 - 单表格Excel带样式  
OMS.downLoadXlsx = ({  
  dom = "el-table", // 表格的DOM选择器，默认为"el-table"  
  name = "文件", // 导出的Excel文件名，默认为"文件"  
  ColumnWdth = [], // 列宽数组，默认为空数组  
  rowName = null, // 行名（表头），如果为null则不设置  
  // ...其他可能的配置参数  
}) => {  
  // 获取表格DOM元素  
  const table = document.querySelector(dom);  
  if (!table) {  
    console.error("未找到指定的表格DOM元素");  
    return;  
  }  
  
  // 将表格转换为工作簿  
  const workbook = XLSXStyle.utils.table_to_book(table, { sheet: "Sheet1" });  
  
  // 设置列宽（可选）  
  if (ColumnWdth.length > 0) {  
    const worksheet = workbook.Sheets["Sheet1"];  
    ColumnWdth.forEach((width, index) => {  
      if (worksheet["!cols"]) {  
        worksheet["!cols"][index] = { wch: width }; // 设置列宽，单位为字符宽度  
      } else {  
        worksheet["!cols"] = [{ wch: width }]; // 初始化列宽数组  
        if (index > 0) {  
          // 对于非第一列，需要添加空列宽对象以保持索引一致  
          for (let i = 1; i < index; i++) {  
            worksheet["!cols"].push({});  
          }  
        }  
      }  
    });  
  }  
  
  // 设置行名（可选）  
  if (rowName) {  
    // 这里可以添加设置行名的代码，但通常行名已经包含在表格的表头中  
    // 如果需要额外处理，可以在此添加逻辑  
  }  
  
  // 生成Excel文件并保存  
  const excelBuffer = XLSXStyle.write(workbook, {  
    bookType: "xlsx",  
    type: "array",  
  });  
  const blob = new Blob([excelBuffer], { type: "application/octet-stream" });  
  FileSaver.saveAs(blob, `${name}.xlsx`);  
};  
  
export default OMS;
import FileSaver from "file-saver";  
import XLSX from "xlsx";  
import XLSXStyle from "xlsx-style-medalsoft"; // 注意：这里使用的是xlsx-style-medalsoft插件，它提供了对Excel样式的支持  
  
const OMS = {};  
  
// 导出Excel函数 - 单表格Excel带样式  
OMS.downLoadXlsx = ({  
  dom = "el-table", // 表格的DOM选择器，默认为"el-table"  
  name = "文件", // 导出的Excel文件名，默认为"文件"  
  ColumnWdth = [], // 列宽数组，默认为空数组  
  rowName = null, // 行名（表头），如果为null则不设置  
  // ...其他可能的配置参数  
}) => {  
  // 获取表格DOM元素  
  const table = document.querySelector(dom);  
  if (!table) {  
    console.error("未找到指定的表格DOM元素");  
    return;  
  }  
  
  // 将表格转换为工作簿  
  const workbook = XLSXStyle.utils.table_to_book(table, { sheet: "Sheet1" });  
  
  // 设置列宽（可选）  
  if (ColumnWdth.length > 0) {  
    const worksheet = workbook.Sheets["Sheet1"];  
    ColumnWdth.forEach((width, index) => {  
      if (worksheet["!cols"]) {  
        worksheet["!cols"][index] = { wch: width }; // 设置列宽，单位为字符宽度  
      } else {  
        worksheet["!cols"] = [{ wch: width }]; // 初始化列宽数组  
        if (index > 0) {  
          // 对于非第一列，需要添加空列宽对象以保持索引一致  
          for (let i = 1; i < index; i++) {  
            worksheet["!cols"].push({});  
          }  
        }  
      }  
    });  
  }  
  
  // 设置行名（可选）  
  if (rowName) {  
    // 这里可以添加设置行名的代码，但通常行名已经包含在表格的表头中  
    // 如果需要额外处理，可以在此添加逻辑  
  }  
  
  // 生成Excel文件并保存  
  const excelBuffer = XLSXStyle.write(workbook, {  
    bookType: "xlsx",  
    type: "array",  
  });  
  const blob = new Blob([excelBuffer], { type: "application/octet-stream" });  
  FileSaver.saveAs(blob, `${name}.xlsx`);  
};  
  
export default OMS;

3. 使用导出功能

现在，我们可以在项目的任何地方引入并使用这个封装好的导出功能。例如，在一个Vue组件中：


<template>  
  <div>  
    <el-table ref="exportTable" :data="tableData">  
      <!-- 表格列定义 -->  
      <el-table-column prop="name" label="姓名"></el-table-column>  
      <el-table-column prop="age" label="年龄"></el-table-column>  
      <!-- 其他列 -->  
    </el-table>  
    <el-button @click="exportExcel">导出Excel</el-button>  
  </div>  
</template>  
  
<script>  
import OMS from "@/utils/tools";  
  
export default {  
  data() {  
    return {  
      tableData: [  
        { name: "张三", age: 25 },  
        { name: "李四", age: 30 },  
        // 其他数据  
      ],  
    };  
  },  
  methods: {  
    exportExcel() {  
      OMS.downLoadXlsx({  
        dom: this.$refs.exportTable.$el.querySelector(".el-table__body-wrapper table"), // 注意：这里需要获取到实际的表格DOM元素，可能需要根据实际情况调整选择器  
        name: "导出数据",  
        ColumnWdth: [15, 10], // 设置姓名列宽为15个字符，年龄列宽为10个字符  
      });  
    },  
  },  
};  
</script>
<template>  
  <div>  
    <el-table ref="exportTable" :data="tableData">  
      <!-- 表格列定义 -->  
      <el-table-column prop="name" label="姓名"></el-table-column>  
      <el-table-column prop="age" label="年龄"></el-table-column>  
      <!-- 其他列 -->  
    </el-table>  
    <el-button @click="exportExcel">导出Excel</el-button>  
  </div>  
</template>  
  
<script>  
import OMS from "@/utils/tools";  
  
export default {  
  data() {  
    return {  
      tableData: [  
        { name: "张三", age: 25 },  
        { name: "李四", age: 30 },  
        // 其他数据  
      ],  
    };  
  },  
  methods: {  
    exportExcel() {  
      OMS.downLoadXlsx({  
        dom: this.$refs.exportTable.$el.querySelector(".el-table__body-wrapper table"), // 注意：这里需要获取到实际的表格DOM元素，可能需要根据实际情况调整选择器  
        name: "导出数据",  
        ColumnWdth: [15, 10], // 设置姓名列宽为15个字符，年龄列宽为10个字符  
      });  
    },  
  },  
};  
</script>
<template>  
  <div>  
    <el-table ref="exportTable" :data="tableData">  
      <!-- 表格列定义 -->  
      <el-table-column prop="name" label="姓名"></el-table-column>  
      <el-table-column prop="age" label="年龄"></el-table-column>  
      <!-- 其他列 -->  
    </el-table>  
    <el-button @click="exportExcel">导出Excel</el-button>  
  </div>  
</template>  
  
<script>  
import OMS from "@/utils/tools";  
  
export default {  
  data() {  
    return {  
      tableData: [  
        { name: "张三", age: 25 },  
        { name: "李四", age: 30 },  
        // 其他数据  
      ],  
    };  
  },  
  methods: {  
    exportExcel() {  
      OMS.downLoadXlsx({  
        dom: this.$refs.exportTable.$el.querySelector(".el-table__body-wrapper table"), // 注意：这里需要获取到实际的表格DOM元素，可能需要根据实际情况调整选择器  
        name: "导出数据",  
        ColumnWdth: [15, 10], // 设置姓名列宽为15个字符，年龄列宽为10个字符  
      });  
    },  
  },  
};  
</script>

注意：在Vue组件中使用时，由于Element UI的表格组件有额外的DOM结构，因此我们需要通过this.$refs.exportTable.$el.querySelector(".el-table__body-wrapper table")来获取到实际的表格DOM元素。这个选择器可能需要根据你实际使用的UI框架和版本进行调整。

另外，xlsx-style-medalsoft插件可能不是官方或广泛使用的插件，因此在实际项目中可能需要根据插件的文档和实际情况进行调整。如果官方xlsx插件已经满足你的需求（即不需要支持复杂的样式），你也可以只使用xlsx和file-saver两个插件。

文中内容均来源于公开资料，受限于信息的时效性和复杂性，可能存在误差或遗漏。我们已尽力确保内容的准确性，但对于因信息变更或错误导致的任何后果，本站不承担任何责任。如需引用本文内容，请注明出处并尊重原作者的版权。

THE END