Jquery怎么导出带样式的Excel

发布时间：2021-07-14 15:06:09 作者：chen
来源：亿速云阅读：633

# jQuery怎么导出带样式的Excel

## 前言

在Web开发中，将数据导出为Excel是常见的需求。虽然原生JavaScript可以实现基础功能，但借助jQuery库可以更高效地完成复杂操作，特别是需要保留表格样式时。本文将详细介绍三种主流方法，并提供完整代码示例。

## 一、基础原理与准备工作

### 1.1 Excel文件本质
Excel文件（.xlsx）实际是XML格式的压缩包，包含多个描述文件：
- `styles.xml` 存储样式定义
- `sharedStrings.xml` 存储文本内容
- `sheet1.xml` 存储工作表数据

### 1.2 浏览器端生成方案
浏览器端生成Excel主要依赖：
- **Blob对象**：二进制数据容器
- **URL.createObjectURL()**：创建临时下载链接
- **HTML表格转换**：将DOM表格转为Excel格式

### 1.3 所需jQuery插件
推荐使用以下库简化开发：
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

二、方法一：使用tableToExcel插件

2.1 插件介绍

tableToExcel是最简单的jQuery解决方案，可将HTML表格直接转为带基础样式的Excel。

2.2 实现步骤

function exportWithTableToExcel() {
  // 克隆表格避免污染原DOM
  const $table = $('#dataTable').clone();
  
  // 添加样式到克隆表格
  $table.find('tr:first th').css({
    'background-color': '#4CAF50',
    'color': 'white',
    'font-weight': 'bold'
  });

  // 核心导出代码
  const uri = 'data:application/vnd.ms-excel;base64,';
  const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
    xmlns:x="urn:schemas-microsoft-com:office:excel">
    <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>
      <x:ExcelWorksheet><x:Name>{worksheet}</x:Name>
      <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>
    </x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
    </head><body><table>{table}</table></body></html>`;
  
  const base64 = function(s) {
    return window.btoa(unescape(encodeURIComponent(s)))
  };
  
  const downloadLink = document.createElement("a");
  downloadLink.href = uri + base64(template.replace(/{table}/g, $table[0].outerHTML));
  downloadLink.download = "styled_data.xls";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

2.3 优缺点分析

✅ 优点：实现简单，零依赖
❌ 缺点：样式支持有限，生成的是老式.xls格式

三、方法二：SheetJS + jQuery

3.1 SheetJS简介

SheetJS（xlsx.js）是功能强大的电子表格处理库，支持高级样式设置。

3.2 完整实现代码

function exportWithSheetJS() {
  // 创建工作簿
  const wb = XLSX.utils.book_new();
  
  // 获取表格数据
  const $table = $('#dataTable');
  const ws = XLSX.utils.table_to_sheet($table[0]);
  
  // 设置样式
  ws["!cols"] = [
    { width: 15 }, { width: 20 }, 
    { width: 10 }, { width: 15 }
  ];
  
  // 添加工作表
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  
  // 生成Excel文件
  XLSX.writeFile(wb, "styled_report.xlsx", {
    cellStyles: true,
    bookSST: true
  });
}

3.3 高级样式配置

// 设置单元格样式
const style = {
  fill: { fgColor: { rgb: "FF00FF00" } },
  font: { bold: true, color: { rgb: "FFFF0000" } },
  border: {
    top: { style: "thin", color: { rgb: "FF000000" } },
    bottom: { style: "thin", color: { rgb: "FF000000" } }
  }
};

ws["A1"].s = style;

四、方法三：ExcelJS专业方案

4.1 ExcelJS优势

支持现代Excel所有特性
完美兼容jQuery
可生成.xlsx格式

4.2 实现示例

async function exportWithExcelJS() {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('报表');
  
  // 添加带样式标题
  worksheet.addRow(['客户报表']).font = { 
    size: 16, 
    bold: true,
    color: { argb: 'FF3A7D44' }
  };
  
  // 合并单元格
  worksheet.mergeCells('A1:D1');
  
  // 从jQuery表格导入数据
  $('#dataTable tr').each(function() {
    const rowData = [];
    $(this).find('td, th').each(function() {
      rowData.push($(this).text());
    });
    worksheet.addRow(rowData);
  });
  
  // 设置列样式
  worksheet.columns.forEach(column => {
    column.width = 20;
    column.alignment = { vertical: 'middle', horizontal: 'center' };
  });
  
  // 生成文件
  const buffer = await workbook.xlsx.writeBuffer();
  saveAs(new Blob([buffer]), "professional_report.xlsx");
}

五、样式深度定制技巧

5.1 条件格式设置

// 使用ExcelJS设置条件格式
worksheet.addConditionalFormatting({
  ref: 'B2:B100',
  rules: [
    {
      type: 'cellIs',
      operator: 'greaterThan',
      formulae: [1000],
      style: { fill: { type: 'pattern', pattern:'solid', fgColor: { argb:'FFFF0000' } } }
    }
  ]
});

5.2 响应式表格处理

// 根据屏幕宽度调整导出列数
function getExportColumns() {
  const isMobile = window.innerWidth < 768;
  return isMobile ? ['name', 'phone'] : ['id', 'name', 'email', 'phone', 'address'];
}

六、浏览器兼容性方案

6.1 多方案兼容实现

function universalExport() {
  try {
    if(typeof ExcelJS !== 'undefined') {
      exportWithExcelJS();
    } else if(typeof XLSX !== 'undefined') {
      exportWithSheetJS();
    } else {
      exportWithTableToExcel();
    }
  } catch(e) {
    alert(`导出失败: ${e.message}`);
  }
}

七、完整示例项目

7.1 HTML结构

<table id="dataTable" class="table">
  <thead>
    <tr><th>ID</th><th>姓名</th><th>销售额</th><th>地区</th></tr>
  </thead>
  <tbody>
    <!-- 动态数据通过jQuery加载 -->
  </tbody>
</table>

<button id="exportBtn" class="btn btn-success">导出Excel</button>

7.2 jQuery数据加载

$(document).ready(function() {
  // 模拟AJAX数据加载
  const mockData = [
    {id: 1, name: '张三', sales: 3580, region: '华东'},
    {id: 2, name: '李四', sales: 4200, region: '华北'}
  ];
  
  const $tbody = $('#dataTable tbody');
  mockData.forEach(item => {
    $tbody.append(
      `<tr>
        <td>${item.id}</td>
        <td class="text-primary">${item.name}</td>
        <td>¥${item.sales.toFixed(2)}</td>
        <td>${item.region}</td>
      </tr>`
    );
  });
  
  // 绑定导出事件
  $('#exportBtn').click(universalExport);
});

结语

本文详细介绍了三种jQuery导出带样式Excel的方案，开发者可根据项目需求选择： 1. 简单场景使用tableToExcel 2. 中等复杂度选择SheetJS 3. 企业级应用推荐ExcelJS

建议在实际项目中添加加载状态提示和错误处理，完整的示例代码已托管在GitHub仓库。 “`

注：实际使用时请注意： 1. 各方案需要引入对应的JS库 2. 现代浏览器推荐使用Promise/async语法 3. 企业级应用建议增加服务器端验证