// 1 安装依赖
npm i -s xlsx-js-style
// 2 vue文件中导入包
import XLSXST from "xlsx-js-style";
// 3 代码实现
const workbook = XLSXST.utils.book_new();
// 创建工作簿
const worksheet = XLSXST.utils.json_to_sheet(this.getTableData(), { skipHeader: true });
// 在这里添加样式代码
for (const key in worksheet) {
if (worksheet[key] instanceof Object) {
worksheet[key].s = {
alignment: {
vertical: 'center',
horizontal: 'center',
indent: 0,
wrapText: true
},
font: {
name: '宋体',
sz: 10,
color: { rgb: '#FF000000' },
bold: false,
italic: false,
underline: false
},
border: {
top: { style: 'thin' },
bottom: { style: 'thin' },
left: { style: 'thin' },
right: { style: 'thin' }
}
}
if (key === 'A1') {
worksheet[key].s.font.sz = 16;
}
if (key === 'A2') {
worksheet[key].s.alignment.horizontal = 'left';
}
if (key === 'A3') {
worksheet[key].s.alignment.horizontal = 'left';
}
}
}
// 列宽
worksheet['!cols'] = [
{
wpx: 100
},
{
wpx: 100
},
{
wpx: 100
},
{
wpx: 100
},
{
wpx: 170
},
{
wpx: 60
}
];
// 合并前三行 前6列 标题
worksheet['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 5 } },
{ s: { r: 1, c: 0 }, e: { r: 1, c: 5 } },
{ s: { r: 2, c: 0 }, e: { r: 2, c: 5 } }];
// 合并第一列 前n行
for (var i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].spanRow > 0) {
// +3 是因为 前三行是写死的 三行标题 +1 是因为第一行是标题头 不需要合并
const mergeCell = { s: { r: i + 1 + 3, c: 0 }, e: { r: this.tableData[i].spanRow + i + 3, c: 0 } };
worksheet['!merges'].push(mergeCell);
}
}
// 合并第二列 前n行
for (var j = 0; j < this.tableData.length; j++) {
if (this.tableData[j].spanSecondRow > 0) {
// +3 是因为 前三行是写死的 三行标题 +1 是因为第一行是标题头 不需要合并
const mergeCell = { s: { r: j + 1 + 3, c: 1 }, e: { r: this.tableData[j].spanSecondRow + j + 3, c: 1 } };
worksheet['!merges'].push(mergeCell);
}
}
XLSXST.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
const excelBuffer = XLSXST.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
saveAs(blob, '标题内容.xlsx');
// 表格有多少行数据 在此处做处理
getTableData () {
const data = [];
// 添加三行写死内容
const one = [ '医院环境卫生学监测结果', '', '', '', '', ''];
// 使用 Set 过滤重复的 proName
const uniqueProNames = new Set(this.tableData.map(item => item.proName));
// 将 Set 转换为数组,并用逗号拼接字符串
const joinedString = Array.from(uniqueProNames).join(',');
const two = ['监测项目:' + joinedString, '', '', '', '', ''];
const three = ['监测日期:' + this.$coms.getDate(this.startTime) + '~' + this.endTime, '', '', '', '', ''];
data.push(one);
data.push(two);
data.push(three);
// 添加表头
const head = ['监测项目', '监测科室', '送检区域', '检出结果', '参考标准', '是否合格'];
data.push(head);
this.tableData.forEach((item) => {
const arr = [item.proName, item.appDeptName, item.monitoringPoint, item.estimatedValue, item.standardValues, item.detectionResult];
data.push(arr);
});
return data;
},
// 样式 注释
// alignment(对齐方式):用于控制文本在单元格内的对齐方式。
// vertical(垂直对齐):可以是 "center"(居中对齐)、"top"(顶部对齐)或 "bottom"(底部对齐)。
// horizontal(水平对齐):可以是 "center"(居中对齐)、"left"(左对齐)或 "right"(右对齐)。
// indent(缩进):用于指定文本的缩进级别,以像素为单位。
// wrapText(换行):如果设置为 true,则文本超出单元格宽度时将自动换行。
// font(字体):用于指定字体的相关属性。
// name(字体名称):可以是常见的字体名称,例如 '宋体'、'Arial' 等。
// sz(字体大小):指定字体的大小,以磅为单位。
// color(字体颜色):可以使用 RGB 值或预定义的颜色名称来设置字体颜色。
// bold(粗体):如果设置为 true,则字体将显示为粗体。
// italic(斜体):如果设置为 true,则字体将显示为斜体。
// underline(下划线):如果设置为 true,则字体将显示为带有下划线。
// border(边框):用于设置单元格的边框样式。
// top、bottom、left、right:分别表示单元格的上、下、左、右边框样式。
// style(样式):可以是 "thin"(细线样式)、"medium"(中等线样式)等。
vue使用xlsx-js-style导出excel表格、合并表格及设置样式
最新推荐文章于 2024-08-09 07:02:10 发布