【vue2】xlsx-js-style 打印
2023-12-21 18:52:04
目前此方法只在vue2中使用过
vue3请自行验证
安装
npm i xlsx-js-style --save
页面引入
import XLSXS from 'xlsx-js-style';
数据
tableData: [
{
studentName: "xxx",
studentNum: "xxx",
xuezhi: "3",
ruxueshijian: "2023",
zhuanye: "Vue",
banji: "科联1班",
achiveList: [
{
index: "1",
kcmc: "语文",
score: "100",
xueqi: "2023-2024第二学期",
},
{
index: "2",
kcmc: "语文",
score: "100",
xueqi: "2023-2024第二学期",
},
{
index: "3",
kcmc: "语文",
score: "100",
xueqi: "2023-2024第二学期",
},
{
index: "4",
kcmc: "语文",
score: "100",
xueqi: "2023-2024第二学期",
},
{
index: "5",
kcmc: "语文",
score: "100",
xueqi: "2023-2024第二学期",
},
],
},
{
studentName: "xxx",
studentNum: "xxx",
xuezhi: "3",
ruxueshijian: "2023",
zhuanye: "Vue",
banji: "科联1班",
achiveList: [
{
index: "1",
kcmc: "语文",
score: "100",
xueqi: "2023-2024第二学期",
},
{
index: "2",
kcmc: "语文",
score: "90",
xueqi: "2023-2024第二学期",
},
{
index: "3",
kcmc: "语文",
score: "80",
xueqi: "2023-2024第二学期",
},
{
index: "4",
kcmc: "语文",
score: "70",
xueqi: "2023-2024第二学期",
},
{
index: "5",
kcmc: "语文",
score: "60",
xueqi: "2023-2024第二学期",
},
],
},
], //列表table数组
逻辑代码
let excelArr = [];//声明一个空数组用来储存
let a = Math.ceil(this.tableData[0].achiveList.length / 2);//因为我的项目里是导出成绩单，成绩单是分两列排列的所以这里取中间值
this.tableData.forEach((res) => {
let arr = [];
arr[0] = ["aaa", "", "", "", "", "", "", ""];
arr[1] = [
"姓名",
res.studentName,
"专业",
res.zhuanye,
"",
"入学时间",
res.ruxueshijian,
"",
];
arr[2] = [
"班级",
res.banji,
"学号",
res.studentNum,
"",
"学制",
res.xuezhi,
"",
];
arr[3] = [
"序号",
"课程名称",
"成绩",
"取得学期",
"序号",
"课程名称",
"成绩",
"取得学期",
];
let b = 0;
console.log("a", a, res.achiveList[b + a].index);
for (let i = 1; i <= a; i++) {
if (i != a) {
arr[b + 3 + i] = [
res.achiveList[b].index,
res.achiveList[b].kcmc,
res.achiveList[b].score,
res.achiveList[b].xueqi,
res.achiveList[b + a].index,
res.achiveList[b + a].kcmc,
res.achiveList[b + a].score,
res.achiveList[b + a].xueqi,
];
} else {
arr[b + 3 + i] = [
res.achiveList[b].index,
res.achiveList[b].kcmc,
res.achiveList[b].score,
res.achiveList[b].xueqi,
"",
"",
"",
"",
];
}
b++;
}
arr[a + 3 + 3] = ["aaa", "", "", "", "", "", "", ""];
res.arr = arr;
});
//在这里循环加样式
this.tableData.forEach((item) => {
item.arr.forEach((i, ind) => {
console.log(ind, 427);
if (ind == 0) {
i.forEach((res, index) => {
let obj = {
v: res,
t: "s",
s: {
font: {
blob: true,
sz: 14,
name: "宋体",
},
// alignment 对齐方式
alignment: {
horizontal: "center",
vertical: "center",
wrapText: true,
},
// border 边框属性
border: {
top: { style: "thin" },
bottom: { style: "thin" },
left: { style: "thin" },
right: { style: "thin" },
},
// fill 颜色填充属性
fill: {
fgColor: { rgb: "87CEEB" },
},
},
};
i[index] = obj;
});
} else if (ind == a + 3 + 3) {
i.forEach((res, index) => {
let obj = {
v: res,
t: "s",
s: {
font: {
sz: 12,
name: "宋体",
},
// alignment 对齐方式
alignment: {
horizontal: "right",
vertical: "center",
wrapText: true,
},
// border 边框属性
border: {
top: { style: "thin" },
bottom: { style: "thin" },
left: { style: "thin" },
right: { style: "thin" },
},
// fill 颜色填充属性
fill: {},
},
};
i[index] = obj;
});
} else {
i.forEach((res, index) => {
let obj = {
v: res,
t: "s",
s: {
font: {
sz: 12,
name: "宋体",
},
// alignment 对齐方式
alignment: {
horizontal: "center",
vertical: "center",
wrapText: true,
},
// border 边框属性
border: {
top: { style: "thin" },
bottom: { style: "thin" },
left: { style: "thin" },
right: { style: "thin" },
},
// fill 颜色填充属性
fill: {},
},
};
i[index] = obj;
});
}
});
});
this.tableData.forEach((item) => {
item.arr.forEach((i) => {
excelArr.push(i);
});
});
const sheet = XLSXS.utils.aoa_to_sheet(excelArr);
//处理合并信息
let tableLength = this.tableData.length;
const merges = [];
let nowRow = 0;
for (let i = 0; i < tableLength; i++) {//这里添加合并单元格选项
merges.push({ s: { r: nowRow, c: 0 }, e: { r: nowRow, c: 7 } });
merges.push({ s: { r: nowRow + 1, c: 3 }, e: { r: nowRow + 1, c: 4 } });
merges.push({ s: { r: nowRow + 1, c: 6 }, e: { r: nowRow + 1, c: 7 } });
merges.push({ s: { r: nowRow + 2, c: 3 }, e: { r: nowRow + 2, c: 4 } });
merges.push({ s: { r: nowRow + 2, c: 6 }, e: { r: nowRow + 2, c: 7 } });
merges.push({
s: { r: nowRow + 2 + 3 + 2, c: 0 },
e: { r: nowRow + 2 + 3 + 2, c: 7 },
});
nowRow = nowRow + a + 2 + 2 + 1;
}
console.log(merges);
sheet["!merges"] = merges;
//处理列宽信息
const cols = [
{ wch: 10 },
{ wch: 10 },
{ wch: 10 },
{ wch: 20 },
{ wch: 10 },
{ wch: 10 },
{ wch: 10 },
{ wch: 20 },
];
sheet["!cols"] = cols; // 将cols添加到sheet中
const workbook = XLSXS.utils.book_new(); // 创建虚拟的 workbook
XLSXS.utils.book_append_sheet(workbook, sheet, "sheet名称"); // 向 workbook 中添加 sheet
XLSXS.writeFile(workbook, "excel名称.xlsx"); // 导出 workbook
实例图片
插件简单文档
定义表头，每一行即是一个数组，数组中的元素即是一个个单元格内容。
如果单元格不需要样式，那么每个元素类型为字符串即可。如：['一月（2022年01月）'],
如果单元格需要样式，那么数组中的元素就需要为一个个对象，在此对象中定义单元格的样式等等。
将二维数组转成 sheet方法
const sheet = XLSXS.utils.aoa_to_sheet(body);
// aoa_to_sheet 是将【一个二维数组】转化成 sheet
// json_to_sheet 是将【由对象组成的数组】转化成sheet
// table_to_sheet 是将【table的dom】直接转成sheet
设置单元格合并方法
{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, 即为一个规则，s:开始位置, e:结束位置, r:行, c:列
文章来源:https://blog.csdn.net/YhWyl527/article/details/135136377
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！