import * as XLSX from 'xlsx-js-style';
//标题
export const listTitleFunc = (sheetName)=>{
return [
{
v: sheetName,
t: 's',
s: {
font: {
bold: true,
color: {
rgb: '040404'
},
name: '宋体',
sz: 12
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: true
},
border: {
top: {
style: 'thin'
},
right: {
style: 'thin'
},
bottom: {
style: 'thin'
},
left: {
style: 'thin'
}
}
}
}
];
}
// 表头
export const listHeadFunc = (columns)=>{
return columns.map((item) => {
// 设置样式
let cell = {
v: item.title,
t: 's',
s: {
font: {
bold: true,
color: {
rgb: '040404'
},
name: '宋体',
sz: 12
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: true
},
border: {
top: {
style: 'thin'
},
right: {
style: 'thin'
},
bottom: {
style: 'thin'
},
left: {
style: 'thin'
}
}
}
};
return cell;
});
}
// 宽度
export const colsFunc = (columns)=>{
let data = []
for (let i = 0; i < columns.length; i++) {
let col = {};
col.wch = columns[i].minWidth;
data.push(col);
}
return data
}
/**
*
* @param {columns} 表头数据
* 示例:columns = [
{title: '序号',label: 'sort',minWidth: 10},
{
title: '风险等级',
label: 'gradeStr',
minWidth: 20,
filter: (value)=> {
switch (value) {
case 1:return '高风险地区';
case 3:return '低风险地区';
default: return ''
}
},
}]
* @param {*} cTableData 表格数据
* @param {*} sheetName 标题名称
* @param {*} fileName 文件名称.xlsx
* @param {*} sheetArr 每个表的名称-例如[sheet1,sheet2....]
*/
export const jsonTosheet = async function(columns,cTableData,sheetName,fileName,sheetArr) {
// 标题处理
let listTitle = listTitleFunc(sheetName)
// 表头处理
let listHead = listHeadFunc(columns)
const excelData = {};
let listConent = {};
let worksheet = {};
const workbook = XLSX.utils.book_new();
const name = fileName
let cols = colsFunc(columns)
Object.keys(cTableData).forEach((key, inx) => {
listConent[key] = cTableData[key].map((item, index) => {
// 处理序号
item.sort = index + 1;
// 设置样式
let arr = columns.map((headItem) => {
let content = ''
if (headItem.filter) {
content = headItem.filter(item[headItem.label]);
} else {
content = item[headItem.label];
}
let cell = {
v: content,
t: 's',
s: {
font: {
name: 'Calibri',
sz: 11,
color: {
rgb: '040404'
}
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: true
},
border: {
top: {
style: 'thin'
},
right: {
style: 'thin'
},
bottom: {
style: 'thin'
},
left: {
style: 'thin'
}
}
}
};
return cell;
});
return arr;
});
excelData[key] = [].concat([listTitle], [listHead], listConent[key]);
let rows = []; // 设置每行的高度
// hpx 字段表示以像素为单位,hpt 高度
for (let i = 0; i < excelData[key].length; i++) {
let row = {};
row.hpt = 15;
rows.push(row);
}
worksheet[key] = XLSX.utils.aoa_to_sheet(excelData[key]);
worksheet[key]['!cols'] = cols; // 设置列宽信息到工作表
worksheet[key]['!rows'] = rows; // 设置行高信息到工作表
// 设置合并行列号--表头
worksheet[key]['!merges'] = [
{
s: {
c: 0,
r: 0
},
e: {
c: worksheet[key]['!cols'].length - 1,
r: 0
}
}
];
let sheet = sheetArr[inx] || 'sheet'+(inx+1)
XLSX.utils.book_append_sheet(workbook, worksheet[key], sheet);
});
console.log('开始写入', new Date());
XLSX.writeFile(workbook, name);
console.log('写入完成', new Date());
}
vue使用js-xlsx导出数据(多表)
最新推荐文章于 2023-12-22 12:02:36 发布