//导出按钮
multiExport(nodes, single) {
this.getAllTableData(nodes, single);
},
//获取所有表数据
getAllTableData(nodes, single) {
//查询表数据条件
let data = { ... };
queryData(data).then(result => {
if (result.data.errorCode == '0') {
let exportData = [];
for (let i = 0, len = result.data.resultList.length; i < len; i++) {
let ele = result.data.resultList[i];
//表的格式不一样， 按个人需求定
let type = this.getTableType(ele.defaultSheet.showByDate,
ele.defaultSheet.showChineseMoneyType);
//表头数据 只有表头需要合并单元格
let head = this.getHeaderData(type, ele.defaultSheet);
//表体数据
let body = this.getBodyData(type, ele.defaultSheet, ele.sheetData);
exportData.push({
tableData: head.headDT.concat(body.bodyData),
mergeCells: head.mergeCells,
rowHeights: body.rowHeights,
colWidths: body.colWidths,
reportName: ele.defaultSheet.sheetName,
tableType: type
});
}
if(single)//是否所有数据导出到一个sheet
this.exportSingleSheet(exportData);
else
this.exportMultipleSheets(exportData);
} else {
Message.error(result.data.msg);
}
}).catch(err => {
Message.error(`${err}`);
});
},
- 1、每张表分别导出到多个sheet
handsontable展示图
//批量导出多个账簿
exportMultipleSheets(tableData) {
let _this = this;
// Load a new blank workbook
XlsxPopulate.fromBlankAsync().then(function(workbook) {
// Modify the workbook.
for (let i = 0, len = tableData.length; i < len; i++) {
// let sheet = workbook.addSheet(tableData[i].reportName); //名称太长
let sheet = workbook.addSheet("sheet"+(i+1));
let data = tableData[i].tableData;
let tableType = tableData[i].tableType;
let range = sheet.range(1, 1, data.length, data[0].length);
// data[0][0] = data[0][0].replace('<br>', '\r\n');//显示的时候不换行 编辑时才换行
range.value(data);
// 设置行高, 列宽
for (let j = 1, len = tableData[i].rowHeights.length; j <= len; j++) {
sheet.row(j).height(tableData[i].rowHeights[j - 1]);
}
for (let j = 1, len = tableData[i].colWidths.length; j <= len; j++) {
sheet.column(j).width(tableData[i].colWidths[j - 1] / 8);
}
// 合并单元格
let mergeCells = tableData[i].mergeCells;
// 判断mergeCells是否为数组
if (Object.prototype.toString.call(mergeCells) !== '[object Array]') {
mergeCells = [];
}
mergeCells.forEach(o => {
sheet
.range(o.row + 1, o.col + 1, o.row + o.rowspan, o.col + o.colspan)
.merged(true);
})
// 样式
for (let i = 0; i < data.length; i++) {
for (let j = 0, row = data[i], l = row.length; j < l; j++) {
// font-size, font-weight
// let td = opt[i].hot.getCell(i, j)
let td = _this.getTd(tableType, {"style": {}}, i, j, row[j]);
let fontSize = td.style.fontSize
? parseInt(td.style.fontSize, 10)
: 14
// let fontFamily = td.style.fontFamily
let bold = td.style.fontWeight
? td.style.fontWeight !== 'normal'
: false
let italic = td.style.fontStyle
? td.style.fontStyle !== 'normal'
: false
let fontColor = td.style.color ? rgb2Hex(td.style.color).slice(1) : ''
let verticalAlignment = td.style.verticalAlign
? td.style.verticalAlign === 'middle'
? 'center'
: td.style.verticalAlign
: 'center'
let horizontalAlignment = td.style.textAlign
? td.style.textAlign
: 'left';
let underline = td.style.textDecoration ? td.style.textDecoration : '';
let fill = td.style.backgroundColor ?
rgb2Hex(td.style.backgroundColor ).slice(1) : '';
let wrapText = true; // 自动换行
let cell = sheet.cell(i + 1, j + 1);
cell.style({
fontSize,
bold,
italic,
fontColor,
verticalAlignment,
horizontalAlignment,
underline,
wrapText
})
fill && cell.style({
fill
});
if( i > 3){
cell.style({ border: true });
}
if(tableType == 1 && i > 5 && (j == 2 || j == 3 || j == 5)){
cell.style({ numberFormat: "#,##0.00" });
}
if(tableType == 2 && i > 5 && (j == 3 || j == 4 || j == 6)){
cell.style({ numberFormat: "#,##0.00" });
}
}
}
}
workbook.deleteSheet('Sheet1');
// Write to file.
workbook.outputAsync().then(function(blob) {
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// If IE, you must uses a different method.
window.navigator.msSaveOrOpenBlob(blob, '总账.xlsx')
} else {
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = '总账.xlsx';
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
})
})
},
导出到多个sheet
- 2、所有表导出到一个sheet
//批量导出 一个账簿
exportSingleSheet(tableData){
let _this = this;
// Load a new blank workbook
XlsxPopulate.fromBlankAsync().then(function(workbook) {
// Modify the workbook.
let sheet = workbook.sheet('Sheet1').name('总账');
let tableGap = 2;//每个表之间空的行数
let sumLastLen = 0;
for (let k = 0, len = tableData.length; k < len; k++) {
let data = tableData[k].tableData;
let tableType = tableData[k].tableType;
let range;
/***和多个sheet的区别****/
if(k == 0){
range = sheet.range(1, 1, data.length, data[0].length);
}else{
sumLastLen += tableData[k-1].tableData.length ? tableData[k-1].tableData.length : 0;
sumLastLen += tableGap;
range = sheet.range(1 + sumLastLen, 1, sumLastLen + data.length, data[0].length);
}
range.value(data);
// 设置行高, 列宽
for (let j = 1, len = tableData[k].rowHeights.length; j <= len; j++) {
sheet.row(j).height(tableData[k].rowHeights[j - 1]);
}
for (let j = 1, len = tableData[k].colWidths.length; j <= len; j++) {
sheet.column(j).width(tableData[k].colWidths[j - 1] / 8);
}
// 合并单元格
let mergeCells = tableData[k].mergeCells;
// 判断mergeCells是否为数组
if (Object.prototype.toString.call(mergeCells) !== '[object Array]') {
mergeCells = [];
}
/***和多个sheet的区别****/
mergeCells.forEach(o => {
sheet
.range(o.row + 1 + sumLastLen , o.col + 1,
o.row + o.rowspan + sumLastLen, o.col + o.colspan)
.merged(true);
});
//样式
for (let i = 0; i < data.length; i++) {
for (let j = 0, row = data[i], l = row.length; j < l; j++) {
let td = _this.getTd(tableType, {"style": {}}, i, j, row[j]);
let fontSize = td.style.fontSize
? parseInt(td.style.fontSize, 10)
: 14;
// let fontFamily = td.style.fontFamily
let bold = td.style.fontWeight
? td.style.fontWeight !== 'normal'
: false;
let italic = td.style.fontStyle
? td.style.fontStyle !== 'normal'
: false;
let fontColor = td.style.color ? rgb2Hex(td.style.color).slice(1) : ''
let verticalAlignment = td.style.verticalAlign
? td.style.verticalAlign === 'middle'
? 'center'
: td.style.verticalAlign
: 'center';
let horizontalAlignment = td.style.textAlign
? td.style.textAlign
: 'left';
let underline = td.style.textDecoration ? td.style.textDecoration : '';
let fill = td.style.backgroundColor ?
rgb2Hex(td.style.backgroundColor ).slice(1) : '';
let wrapText = true; // 自动换行
/***和多个sheet的区别****/
let cell = sheet.cell(i + 1 + sumLastLen, j + 1);
cell.style({
fontSize,
bold,
italic,
fontColor,
verticalAlignment,
horizontalAlignment,
underline,
wrapText
});
fill && cell.style({
fill
});
if( i > 3){
cell.style({ border: true });
}
if(tableType == 1 && i > 5 && (j == 2 || j == 3 || j == 5)){
cell.style({ numberFormat: "#,##0.00" });
}
if(tableType == 2 && i > 5 && (j == 3 || j == 4 || j == 6)){
cell.style({ numberFormat: "#,##0.00" });
}
}
}
}
// Write to file.
workbook.outputAsync().then(function(blob) {
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// If IE, you must uses a different method.
window.navigator.msSaveOrOpenBlob(blob, '总账.xlsx')
} else {
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = '总账.xlsx';
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
})
})
}
多张表导出到一个sheet
下面可忽略
//渲染表格样式
mycells: function(row, col, props) {
let _this = this;
return {
renderer: function (instance, td, row, col, prop, value, cellProps) {
_this.getTd(_this.tableType, td, row, col, value);
}
}
},
getTd(tableType, td, row, col, value){
if(tableType == 1){
td.innerText = value ? value: '';
td.style.verticalAlign = 'middle';
td.style.fontSize = '10px';
td.style.fontFamily = '宋体';
td.style.height = '20px';
td.style.overflow = 'hidden';
td.style.textOoverflow = 'ellipsis';
td.style.whiteSpace = 'nowrap';
if(row == 0 || row == 1){//标题
td.style.textAlign = 'center';
td.style.fontWeight = 'bold';
td.style.fontSize = '14px';
td.style.textDecoration = 'underline';
// td.innerHTML = value;
}
else if( row == 3 && col == 5){//单位
td.style.textAlign = 'right';
}
else if(row == 4){//列头
td.style.textAlign = 'center';
td.style.fontWeight = 'bold';
td.style.fontSize = '12px';
} else if( (row > 5 && (col == 0 || col == 4) )){//日期 借或贷
td.style.textAlign = 'center';
}
else if( (row > 5 && (col == 2 || col == 3 || col == 5))){//金额
td.style.textAlign = 'right';
td.innerText = value ? money2Thousand(value) : "0.00";
if(!isNaN(value) && Number(value) < 0){
td.style.color = "#f00";
td.innerText = value ? money2Thousand(Math.abs(value)) : "0.00";
}
}
else{
td.style.textAlign = 'left';
}
}
if(tableType == 2){
td.innerText = value ? value: '';
td.style.verticalAlign = 'middle';
td.style.fontSize = '10px';
td.style.fontFamily = '宋体';
td.style.height = '20px';
td.style.overflow = 'hidden';
td.style.textOoverflow = 'ellipsis';
td.style.whiteSpace = 'nowrap';
if(row == 0 || row == 1){//标题
td.style.textAlign = 'center';
td.style.fontWeight = 'bold';
td.style.fontSize = '14px';
td.style.textDecoration = 'underline';
// td.innerHTML = value;
}
else if( row == 3 && col == 5){//单位
td.style.textAlign = 'right';
}
else if(row == 4 || row == 4){//列头
td.style.textAlign = 'center';
td.style.fontWeight = 'bold';
td.style.fontSize = '12px';
} else if( row > 5 && (col == 0 || col == 1 || col == 5)){//日期 借或贷
td.style.textAlign = 'center';
}
else if( (row > 5 && (col == 3 || col == 4 || col == 6))){//金额
td.style.textAlign = 'right';
td.innerText = value ? money2Thousand(value) : "0.00";
if(!isNaN(value) && Number(value) < 0){
td.style.color = "#f00";
td.innerText = value ? money2Thousand(Math.abs(value)) : "0.00";
}
}
else{
td.style.textAlign = 'left';
}
}
if(tableType == 3){
td.innerText = value ? value: '';
td.style.verticalAlign = 'middle';
td.style.fontSize = '10px';
td.style.fontFamily = '宋体';
td.style.height = '20px';
td.style.overflow = 'hidden';
td.style.textOoverflow = 'ellipsis';
td.style.whiteSpace = 'nowrap';
if(row == 0 || row == 1){//标题
td.style.textAlign = 'center';
td.style.fontWeight = 'bold';
td.style.fontSize = '14px';
td.style.textDecoration = 'underline';
td.innerHTML = value;
}
else if(row == 4 || row == 5){//列头
td.style.textAlign = 'center';
td.style.fontWeight = 'bold';
td.style.fontSize = '12px';
} else if( row > 5 && col != 1 ){//日期 金额
td.style.textAlign = 'center';
}
else{
td.style.textAlign = 'left';
}
}
if(tableType == 4){
td.innerText = value ? value: '';
td.style.verticalAlign = 'middle';
td.style.fontSize = '10px';
td.style.fontFamily = '宋体';
td.style.height = '20px';
td.style.overflow = 'hidden';
td.style.textOoverflow = 'ellipsis';
td.style.whiteSpace = 'nowrap';
if(row == 0 || row == 1){//标题
td.style.textAlign = 'center';
td.style.fontWeight = 'bold';
td.style.fontSize = '14px';
td.style.textDecoration = 'underline';
td.innerHTML = value;
}
else if(row == 4 || row == 5){//列头
td.style.textAlign = 'center';
td.style.fontWeight = 'bold';
td.style.fontSize = '12px';
} else if( row > 5 && col != 2 ){//日期 金额
td.style.textAlign = 'center';
}
else{
td.style.textAlign = 'left';
}
}
return td;
},
