在前端使用xlsx
模板导出表格可以通过以下步骤实现:
一、引入必要的库
首先,需要引入xlsx
库。可以通过以下方式引入:
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
二、准备数据和模板
- 数据准备:
- 假设你有一个包含数据的数组,例如:
const data = [ { name: 'John', age: 30 }, { name: 'Jane', age: 25 }, { name: 'Bob', age: 35 } ];
- 模板准备:
- 创建一个 Excel 模板文件,可以使用任何电子表格软件(如 Microsoft Excel、Google Sheets 等)创建模板。在模板中,可以设置标题、列名等格式,并预留出数据填充的位置。
- 假设模板中有一个名为 “Sheet1” 的工作表,第一行是列名(如 “Name” 和 “Age”),从第二行开始是数据填充区域。
三、读取模板并填充数据
- 读取模板:
- 使用
XLSX.readFile
方法读取模板文件:
const workbook = XLSX.readFile('template.xlsx');
- 选择工作表:
- 获取模板中的特定工作表,例如 “Sheet1”:
const worksheet = workbook.Sheets['Sheet1'];
- 填充数据:
- 根据模板中的数据位置,使用
XLSX.utils.sheet_add_json
方法将数据填充到工作表中:
XLSX.utils.sheet_add_json(worksheet, data, { origin: 'A2', skipHeader: true });
四、导出表格
- 将填充数据后的工作表转换为二进制数据:
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
- 创建 Blob 对象并设置文件类型:
const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
- 创建下载链接并触发下载:
const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'exported_table.xlsx'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url);
通过以上步骤,就可以在前端使用xlsx
模板导出表格。在实际应用中,可以根据具体需求调整模板的格式和数据的填充方式。