layui自带的导出表格内容乱码、layui excel导出复杂表头

在使用Layui框架进行前端开发时，经常会遇到导出表格内容乱码和复杂表头的问题。本文将详细介绍如何解决这些问题，并提供多种解决方案。

解决方案概述

1. 解决导出表格内容乱码：通过设置正确的字符编码格式，确保导出的Excel文件内容不会出现乱码。
2. 处理复杂表头：使用Layui的table.export方法或自定义导出逻辑，生成包含多级表头的Excel文件。

解决导出表格内容乱码

设置正确的字符编码

在导出Excel文件时，确保设置正确的字符编码格式，通常使用UTF-8编码。可以通过以下代码示例来实现：

javascript
// 获取表格数据
var tableData = layui.table.cache['yourTableId'];</p>

<p>// 将数据转换为CSV格式
function convertToCSV(data) {
    var csvContent = "data:text/csv;charset=utf-8,";
    data.forEach(function(rowArray) {
        var row = rowArray.join(",");
        csvContent += row + "rn";
    });
    return encodeURI(csvContent);
}</p>

<p>// 导出CSV文件
function exportCSV() {
    var csvContent = convertToCSV(tableData);
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "tableData.csv");
    document.body.appendChild(link); // Required for FF
    link.click();
}</p>

<p>// 调用导出函数
exportCSV();

使用第三方库

如果需要更复杂的导出功能，可以使用第三方库如xlsx来生成Excel文件。以下是一个示例：

html</p>



<p>

javascript
// 获取表格数据
var tableData = layui.table.cache['yourTableId'];</p>

<p>// 将数据转换为Excel格式
function convertToExcel(data) {
    var ws = XLSX.utils.json<em>to</em>sheet(data);
    var wb = XLSX.utils.book<em>new();
    XLSX.utils.book</em>append_sheet(wb, ws, "Sheet1");
    XLSX.writeFile(wb, 'tableData.xlsx', { bookType: 'xlsx', type: 'binary' });
}</p>

<p>// 导出Excel文件
function exportExcel() {
    convertToExcel(tableData);
}</p>

<p>// 调用导出函数
exportExcel();

处理复杂表头

使用Layui的table.export方法

Layui的table.export方法支持导出表格数据，但默认情况下不支持复杂表头。可以通过自定义导出逻辑来实现多级表头。

javascript
// 获取表格数据
var tableData = layui.table.cache['yourTableId'];</p>

<p>// 自定义导出逻辑
function exportWithComplexHeader() {
    var ws = XLSX.utils.json<em>to</em>sheet(tableData);</p>

<pre><code>// 添加复杂表头
var headerRow = [
    ['一级表头1', '', '', '一级表头2', '', ''],
    ['二级表头1', '二级表头2', '二级表头3', '二级表头4', '二级表头5', '二级表头6']
];

// 合并单元格
var range = { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } };
XLSX.utils.sheet_add_aoa(ws, headerRow, { origin: -1 });
XLSX.utils.sheet_add_json(ws, tableData, { skipHeader: true, origin: -1 });
XLSX.utils.sheet_add_merges(ws, [range]);

var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, 'tableData.xlsx', { bookType: 'xlsx', type: 'binary' });

}

// 调用导出函数
exportWithComplexHeader();

手动构建Excel文件

如果需要更灵活的控制，可以手动构建Excel文件，包括复杂表头和数据部分。

javascript
// 获取表格数据
var tableData = layui.table.cache['yourTableId'];</p>

<p>// 构建复杂表头
var headerRow = [
    ['一级表头1', '', '', '一级表头2', '', ''],
    ['二级表头1', '二级表头2', '二级表头3', '二级表头4', '二级表头5', '二级表头6']
];</p>

<p>// 合并单元格
var range = { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } };</p>

<p>// 创建工作簿和工作表
var ws = XLSX.utils.aoa<em>to</em>sheet(headerRow);
XLSX.utils.sheet<em>add</em>json(ws, tableData, { skipHeader: true, origin: -1 });
XLSX.utils.sheet<em>add</em>merges(ws, [range]);</p>

<p>var wb = XLSX.utils.book<em>new();
XLSX.utils.book</em>append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, 'tableData.xlsx', { bookType: 'xlsx', type: 'binary' });

通过以上方法，可以有效地解决Layui导出表格内容乱码和复杂表头的问题。希望这些解决方案对您有所帮助。