<think>我们已知用户希望将Map类型数据导出为格式化的Excel文件,要求包含标题(第一行)、字段名(第二行)和数据内容(第三行及之后)。样式要求:所有内容居中、宋体、黑色字体,且从第二行开始(包括字段名行和数据行)加黑色边框。由于原生的xlsx库不支持样式,我们可以使用xlsx-style库(注意解决兼容性问题),或者使用exceljs库(支持样式且更现代,但需要额外安装)。考虑到用户之前的示例代码使用了xlsx和file-saver,但用户也提供了使用exceljs的引用[2],这里提供两种方案:方案一:使用xlsx和xlsx-style(注意兼容性处理)方案二:使用exceljs(推荐,因为它原生支持样式且更容易配置)根据用户提供的引用[2][3][4],我们知道xlsx-style在Webpack中会有兼容性问题,需要特殊处理。而exceljs是一个更强大且支持样式的库。因此,这里推荐使用exceljs,并按照引用[2]中的方法进行封装。由于用户的数据是Map类型(在JavaScript中,Map是一种键值对集合,但通常导出Excel需要的是数组结构),所以我们需要先将Map转换为数组。假设用户的数据结构如下:标题:供应商白名单字段名(表头):['序号','供应商名称','统一信用代码','授权品类']数据:一个Map对象,键可以是任意值(但通常我们遍历Map得到数组)但注意:Map的遍历方式为:letdataArray=Array.from(map,([key,value])=>({...value,id:key}));不过,更常见的需求是数组对象。我们假设用户的数据已经处理好为数组形式(例如,用户提供的数据是数组,每个元素是一个对象)。但用户要求是Map,所以我们将演示如何将Map转换为数组。步骤:1.安装依赖:exceljs和file-saver2.创建一个工作簿和工作表。3.设置标题行(合并单元格)并设置样式。4.设置表头行(第二行)并设置样式。5.添加数据行(第三行开始)并设置样式。6.导出Excel文件。根据引用[2]的示例,我们进行如下操作:注意:引用[2]中提供了封装的方法,但这里我们直接使用exceljs进行编写,以便更清晰。以下是完整代码(Vue组件中的方法):</think>
# Map数据导出Excel格式方案
我将提供完整的解决方案,使用JavaScript将Map类型数据导出为格式化的Excel文件,并设置标题、字段名和数据的样式要求。
## 完整解决方案代码
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map数据导出Excel</title>
<script src="https://unpkg.com/exceljs/dist/exceljs.min.js"></script>
<script src="https://unpkg.com/file-saver/dist/FileSaver.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f7fa;
}
.container {
background: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.data-display {
margin-top: 20px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 15px;
max-height: 300px;
overflow-y: auto;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 10px;
}
.description {
text-align: center;
color: #7f8c8d;
margin-bottom: 25px;
}
.btn-export {
display: block;
width: 200px;
padding: 12px 20px;
margin: 0 auto;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s;
}
.btn-export:hover {
background-color: #66b1ff;
}
.requirements {
background: #f2f6fc;
border-left: 4px solid #409eff;
padding: 15px;
margin: 20px 0;
border-radius: 4px;
}
.footer {
text-align: center;
margin-top: 30px;
color: #95a5a6;
font-size: 14px;
}
pre {
background-color: #f8f8f8;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Map数据导出Excel</h1>
<p class="description">将JavaScript Map类型数据导出为格式化的Excel文件</p>
<div class="requirements">
<strong>格式要求:</strong>
<ul>
<li>第一行为标题:供应商白名单</li>
<li>第二行为各字段名(中文)</li>
<li>第三行及之后为数据内容</li>
<li>所有内容:居中、宋体、黑色</li>
<li>第二行及以后加黑色边框</li>
</ul>
</div>
<button id="exportBtn" class="btn-export">导出Excel文件</button>
<div class="data-display">
<h3>示例数据内容(演示Map结构)</h3>
<pre id="dataPreview"></pre>
</div>
<div class="code-snippet">
<h3>核心导出代码</h3>
<pre>
// 导出Excel的主要函数
async function exportToExcel() {
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('供应商白名单');
// 添加标题行
worksheet.mergeCells('A1:D1');
const titleCell = worksheet.getCell('A1');
titleCell.value = '供应商白名单';
applyTitleStyle(titleCell);
// 添加表头行
const headers = ['供应商ID', '税号', '供应商名称', '状态'];
worksheet.addRow(headers);
// 应用表头样式
const headerRow = worksheet.getRow(2);
headerRow.eachCell(cell => applyHeaderStyle(cell));
// 添加数据行
sampleData.forEach((value, key) => {
const rowData = [key, ...Object.values(value)];
const row = worksheet.addRow(rowData);
// 应用数据行样式
row.eachCell(cell => applyDataStyle(cell));
});
// 自动调整列宽
worksheet.columns.forEach(column => {
column.width = 20;
});
// 导出文件
const buffer = await workbook.xlsx.writeBuffer();
saveAs(new Blob([buffer]), '供应商白名单.xlsx');
}
// 应用标题样式函数
function applyTitleStyle(cell) {
cell.font = {
name: '宋体',
size: 16,
bold: true,
color: { argb: 'FF000000' }
};
cell.alignment = {
vertical: 'middle',
horizontal: 'center'
};
}
// 应用表头样式函数
function applyHeaderStyle(cell) {
cell.font = {
name: '宋体',
size: 12,
bold: true,
color: { argb: 'FF000000' }
};
cell.alignment = {
vertical: 'middle',
horizontal: 'center'
};
cell.border = {
top: { style: 'thin', color: { argb: 'FF000000' } },
left: { style: 'thin', color: { argb: 'FF000000' } },
bottom: { style: 'thin', color: { argb: 'FF000000' } },
right: { style: 'thin', color: { argb: 'FF000000' } }
};
}
// 应用数据样式函数
function applyDataStyle(cell) {
cell.font = {
name: '宋体',
size: 11,
color: { argb: 'FF000000' }
};
cell.alignment = {
vertical: 'middle',
horizontal: 'center'
};
cell.border = {
top: { style: 'thin', color: { argb: 'FF000000' } },
left: { style: 'thin', color: { argb: 'FF000000' } },
bottom: { style: 'thin', color: { argb: 'FF000000' } },
right: { style: 'thin', color: { argb: 'FF000000' } }
};
}</pre>
</div>
<div class="footer">
本方案使用ExcelJS库实现完整Excel导出功能
</div>
</div>
<script>
// 生成示例Map数据
const sampleData = new Map([
['S001', { taxId: '911100001', name: '北京科技有限公司', status: '启用' }],
['S002', { taxId: '911100002', name: '上海贸易有限公司', status: '禁用' }],
['S003', { taxId: '911100003', name: '广州电子商务有限公司', status: '启用' }],
['S004', { taxId: '911100004', name: '深圳创新科技有限公司', status: '启用' }],
['S005', { taxId: '911100005', name: '杭州电子制造有限公司', status: '禁用' }],
['S006', { taxId: '911100006', name: '成都物流服务有限公司', status: '启用' }],
['S007', { taxId: '911100007', name: '武汉生物医药有限公司', status: '启用' }],
['S008', { taxId: '911100008', name: '南京金融服务有限公司', status: '禁用' }],
['S009', { taxId: '911100009', name: '天津基础设施建设有限公司', status: '启用' }],
['S010', { taxId: '911100010', name: '苏州精密机械有限公司', status: '禁用' }]
]);
// 在页面上显示Map数据
const dataPreview = document.getElementById('dataPreview');
let previewHTML = '';
sampleData.forEach((value, key) => {
previewHTML += `<strong>${key}</strong>: ${JSON.stringify(value)}\n`;
});
dataPreview.textContent = previewHTML;
// 导出Excel功能
document.getElementById('exportBtn').addEventListener('click', exportToExcel);
async function exportToExcel() {
try {
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('供应商白名单');
// 添加标题行
worksheet.mergeCells('A1:D1');
const titleCell = worksheet.getCell('A1');
titleCell.value = '供应商白名单';
applyTitleStyle(titleCell);
// 添加表头行
const headers = ['供应商ID', '税号', '供应商名称', '状态'];
worksheet.addRow(headers);
// 应用表头样式
const headerRow = worksheet.getRow(2);
headerRow.eachCell(cell => applyHeaderStyle(cell));
// 添加数据行
sampleData.forEach((value, key) => {
const rowData = [key, value.taxId, value.name, value.status];
const row = worksheet.addRow(rowData);
// 应用数据行样式
row.eachCell(cell => applyDataStyle(cell));
});
// 自动调整列宽
worksheet.columns.forEach(column => {
column.width = 20;
});
// 导出文件
const buffer = await workbook.xlsx.writeBuffer();
saveAs(new Blob([buffer]), '供应商白名单.xlsx');
alert('Excel文件导出成功!');
} catch (error) {
console.error('导出失败:', error);
alert('导出失败,请查看控制台错误信息');
}
}
// 应用标题样式函数
function applyTitleStyle(cell) {
cell.font = {
name: '宋体',
size: 16,
bold: true,
color: { argb: 'FF000000' }
};
cell.alignment = {
vertical: 'middle',
horizontal: 'center'
};
}
// 应用表头样式函数
function applyHeaderStyle(cell) {
cell.font = {
name: '宋体',
size: 12,
bold: true,
color: { argb: 'FF000000' }
};
cell.alignment = {
vertical: 'middle',
horizontal: 'center'
};
cell.border = {
top: { style: 'thin', color: { argb: 'FF000000' } },
left: { style: 'thin', color: { argb: 'FF000000' } },
bottom: { style: 'thin', color: { argb: 'FF000000' } },
right: { style: 'thin', color: { argb: 'FF000000' } }
};
}
// 应用数据样式函数
function applyDataStyle(cell) {
cell.font = {
name: '宋体',
size: 11,
color: { argb: 'FF000000' }
};
cell.alignment = {
vertical: 'middle',
horizontal: 'center'
};
cell.border = {
top: { style: 'thin', color: { argb: 'FF000000' } },
left: { style: 'thin', color: { argb: 'FF000000' } },
bottom: { style: 'thin', color: { argb: 'FF000000' } },
right: { style: 'thin', color: { argb: 'FF000000' } }
};
}
</script>
</body>
</html>
```
## 关键实现说明
1. **Map数据处理**:
- 使用JavaScript的Map类型存储数据
- 通过`forEach`方法遍历Map获取键值对
- 将键值对转换为数组形式后添加到Excel中
2. **导出流程**:
- 创建Excel工作簿和工作表
- 设置第一行为标题(合并单元格)
- 设置第二行为表头(字段名)
- 从第三行开始添加数据
- 应用指定样式(居中、宋体、黑色字体)
- 为第二行及以后添加黑色边框
3. **样式设置函数**:
- `applyTitleStyle`:设置标题行的字体、对齐方式
- `applyHeaderStyle`:设置表头行的字体、对齐方式和边框
- `applyDataStyle`:设置数据行的字体、对齐方式和边框
4. **Excel文件生成**:
- 使用ExcelJS的writeBuffer方法生成Excel二进制数据
- 使用FileSaver的saveAs方法保存文件
## 实际应用说明
1. 将上述代码保存为HTML文件并直接在浏览器中打开
2. 点击"导出Excel文件"按钮即可生成符合要求的Excel文件
3. 实际项目中使用时,可将核心导出函数集成到Vue组件中
4. 需要替换`sampleData`变量为实际的Map类型数据
导出的Excel文件格式满足所有要求:
- 第一行标题"供应商白名单"
- 第二行各字段名(中文)
- 第三行及之后为数据内容
- 所有内容居中、宋体、黑色字体
- 第二行及以后加黑色边框