lay-excel：基于xlsx.js的导入导出插件，一行代码即可导出

2023-11-09 22:22:50

前言

在日常的开发中，经常会遇到需要将数据导入导出到 Excel 表格中的场景。传统的实现方式往往较为繁琐，需要借助第三方库或复杂的操作。为了解决这一问题，本篇文章将为大家介绍一款基于 xlsx.js 的导入导出插件——lay-excel。

lay-excel 插件功能强大，操作便捷，仅需一行代码即可实现表格的导出功能。同时，它还支持多种导出格式，包括 xlsx、csv、txt 等，满足不同场景下的需求。

插件安装

lay-excel 插件可以通过 npm 或 cdn 的方式进行安装：

npm 安装

npm install lay-excel

cdn 安装

<script src="https://unpkg.com/lay-excel/dist/lay-excel.js"></script>

基本用法

lay-excel 的基本用法非常简单，只需一行代码即可完成表格的导出：

// 导入 lay-excel
import Excel from 'lay-excel'

// 初始化 lay-excel
const excel = new Excel({
  el: '#export-btn' // 导出按钮的元素 ID
})

// 导出表格
excel.export()

上述代码中，el 参数指定了导出按钮的元素 ID。点击该按钮后，lay-excel 会自动将表格数据导出到 Excel 文件中。

进阶用法

设置导出文件名

可以通过 filename 参数设置导出的 Excel 文件名：

// 设置导出文件名
excel.export({
  filename: '导出的文件名.xlsx'
})

设置导出格式

lay-excel 支持多种导出格式，可以通过 type 参数进行设置：

// 设置导出格式
excel.export({
  type: 'xlsx' // 导出为 xlsx 格式
})

设置导出的数据

可以通过 data 参数设置导出的数据，可以是一个数组或一个函数：

// 设置导出的数据
excel.export({
  data: [
    { name: '张三', age: 20 },
    { name: '李四', age: 30 }
  ]
})

设置导出的列

可以通过 columns 参数设置导出的列，可以是一个数组或一个函数：

// 设置导出的列
excel.export({
  columns: [
    { key: 'name', title: '姓名' },
    { key: 'age', title: '年龄' }
  ]
})

设置导出的样式

可以通过 style 参数设置导出的样式，可以是一个数组或一个函数：

// 设置导出的样式
excel.export({
  style: {
    fontSize: 12, // 设置字体大小
    color: '#000' // 设置字体颜色
  }
})

示例

下面是一个完整的示例，展示了如何使用 lay-excel 插件导出一个包含姓名和年龄两列的表格：

import Excel from 'lay-excel'

const excel = new Excel({
  el: '#export-btn'
})

const data = [
  { name: '张三', age: 20 },
  { name: '李四', age: 30 }
]

const columns = [
  { key: 'name', title: '姓名' },
  { key: 'age', title: '年龄' }
]

excel.export({
  data,
  columns
})