# 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是最簡單的jQuery解決方案，可將HTML表格直接轉為帶基礎樣式的Excel。
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);
}
SheetJS（xlsx.js）是功能強大的電子表格處理庫，支持高級樣式設置。
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
});
}
// 設置單元格樣式
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;
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");
}
// 使用ExcelJS設置條件格式
worksheet.addConditionalFormatting({
ref: 'B2:B100',
rules: [
{
type: 'cellIs',
operator: 'greaterThan',
formulae: [1000],
style: { fill: { type: 'pattern', pattern:'solid', fgColor: { argb:'FFFF0000' } } }
}
]
});
// 根據屏幕寬度調整導出列數
function getExportColumns() {
const isMobile = window.innerWidth < 768;
return isMobile ? ['name', 'phone'] : ['id', 'name', 'email', 'phone', 'address'];
}
function universalExport() {
try {
if(typeof ExcelJS !== 'undefined') {
exportWithExcelJS();
} else if(typeof XLSX !== 'undefined') {
exportWithSheetJS();
} else {
exportWithTableToExcel();
}
} catch(e) {
alert(`導出失敗: ${e.message}`);
}
}
<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>
$(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. 企業級應用建議增加服務器端驗證
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
