6 changed files with 1024 additions and 19 deletions
@ -0,0 +1,266 @@
|
||||
import XLSX from 'xlsx-js-style'; |
||||
import { getObjType, isNumber } from '@/utils/util'; |
||||
|
||||
export function exportExcel(columnList = [], listData = [], name = 'excel') { |
||||
// 创建工作簿
|
||||
const wb = XLSX.utils.book_new(); |
||||
|
||||
const headers = []; |
||||
|
||||
const blackArr = ['序号', '复选框', '操作']; |
||||
|
||||
const data = []; |
||||
|
||||
for (let j = 0; j < listData.length; j++) { |
||||
const item = listData[j]; |
||||
const arr = []; |
||||
|
||||
for (let i = 0; i < columnList.length; i++) { |
||||
const val = columnList[i]; |
||||
|
||||
if (blackArr.includes(val.label)) continue; |
||||
|
||||
if (j === 0) headers.push(val.label); |
||||
arr.push(item[val.prop] || ''); |
||||
} |
||||
console.log('arr :>> ', arr); |
||||
data.push(arr); |
||||
} |
||||
|
||||
// 将数据转换为Excel单元格的值
|
||||
const ws_data = [ |
||||
// ['Column1', 'Column2', 'Column3'], // 表头
|
||||
headers, |
||||
...data, // 数据行
|
||||
]; |
||||
|
||||
// 创建工作表
|
||||
const ws = XLSX.utils.aoa_to_sheet(ws_data); |
||||
|
||||
console.log('ws :>> ', ws); |
||||
|
||||
// 1.所有表头的宽度
|
||||
const headsWidth = headers.map(value => { |
||||
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) { |
||||
return (parseFloat(value.toString().length * 2.1) + 4).toFixed(2); |
||||
} else { |
||||
return (parseFloat(value.toString().length * 1.1) + 4).toFixed(2); |
||||
} |
||||
}); |
||||
// console.log("所有表头的宽度：", headsWidth);
|
||||
|
||||
// 2.所有表体值的宽度
|
||||
const rowsWidth = data.map(item => { |
||||
// 每行数据中值的宽度
|
||||
const maxValue = Object.values(item).map((value, index) => { |
||||
let valueWidth = 0; |
||||
if (value) |
||||
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) { |
||||
valueWidth = (parseFloat(value.toString().length * 2.1) + 4).toFixed(2); |
||||
} else { |
||||
valueWidth = (parseFloat(value.toString().length * 1.1) + 4).toFixed(2); |
||||
} |
||||
// console.log("每行数据中值的宽度：", valueWidth);
|
||||
|
||||
// 对比出表头和表体值的最大数
|
||||
return Math.max(valueWidth, headsWidth[index]); |
||||
}); |
||||
// console.log("本行值中最大宽度：", maxValue);
|
||||
return maxValue; |
||||
}); |
||||
// console.log("每行数据对比出的最大宽度：", rowsWidth);
|
||||
|
||||
// 3.对比每列最大值
|
||||
let aotuWidth = []; |
||||
rowsWidth.map((row, index) => { |
||||
let maxWidth = []; |
||||
row.map((value, i) => { |
||||
if (index === 0) { |
||||
maxWidth.push({ |
||||
wch: value, |
||||
}); |
||||
} else { |
||||
maxWidth.push({ |
||||
wch: Math.max(value, aotuWidth[i].wch), |
||||
}); |
||||
} |
||||
}); |
||||
aotuWidth = maxWidth; |
||||
}); |
||||
// console.log("每列最大宽度：", aotuWidth);
|
||||
|
||||
// 4.给excel设置自适应宽度
|
||||
ws['!cols'] = aotuWidth; |
||||
const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows']; |
||||
console.log('ws :>> ', ws); |
||||
for (let key in ws) { |
||||
if (ws.hasOwnProperty(key)) { |
||||
if (!excludes.includes(key)) { |
||||
ws[key].s = { |
||||
alignment: { |
||||
// horizontal: 'center', //水平居中对齐
|
||||
// vertical: 'center', // 垂直居中
|
||||
wrapText: true, |
||||
}, |
||||
border: { |
||||
top: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
bottom: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
left: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
right: { |
||||
style: 'thin', |
||||
color: { rgb: '000000' }, |
||||
}, |
||||
}, |
||||
// fill: {
|
||||
// fgColor: { rgb: "00a2ff" },
|
||||
// },
|
||||
font: { |
||||
sz: 11, |
||||
color: { |
||||
rgb: '000000', |
||||
}, |
||||
}, |
||||
bold: true, |
||||
numFmt: 0, |
||||
}; |
||||
const _text = ws[key].v; |
||||
getObjType(_text) === 'string' && (ws[key].v = _text.replace('-->', '')); |
||||
// 单元格宽度
|
||||
// ws['!cols'].push({ wpx });
|
||||
// 根据不同行添加单元格背景颜色
|
||||
let color = 'ffffff'; |
||||
// 文字颜色
|
||||
let textColor = '000000'; |
||||
let num = Number(key.slice(1)); |
||||
num = isNumber(num) ? num : Number(key.slice(2)); |
||||
if (num === 1) { |
||||
color = '172e60'; |
||||
textColor = 'ffffff'; |
||||
ws[key].s.font.sz = 12; |
||||
} else { |
||||
} |
||||
ws[key].s.fill = { |
||||
fgColor: { rgb: color, patternType: 'solid' }, |
||||
}; |
||||
|
||||
ws[key].s.font.color.rgb = textColor; |
||||
} |
||||
} |
||||
} |
||||
// ws['B1'].s = { ...fontStyle, ...borderStyle };
|
||||
|
||||
// 将工作表添加到工作簿;
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); |
||||
|
||||
// 生成Excel文件;
|
||||
XLSX.writeFile(wb, name + '.xlsx'); |
||||
} |
||||
|
||||
// 导出列表
|
||||
const exportPreviewIp = () => { |
||||
const result = state.data.map(item => ({ |
||||
实例ID: item.instanceId, |
||||
uuid: item.uuid, |
||||
地区: item.region, |
||||
创建时间: item.createdTime, |
||||
关机时间: item.terminatedTime, |
||||
})); |
||||
const worksheet = XLSX.utils.json_to_sheet(result); |
||||
|
||||
// 表头的样式
|
||||
worksheet['A1'].s = { |
||||
font: { |
||||
bold: true, |
||||
}, |
||||
alignment: { |
||||
horizontal: 'center', |
||||
vertical: 'center', |
||||
}, |
||||
}; |
||||
|
||||
// 合并单元格 s: 起始位置, e: 结束位置, r: 行, c: 列
|
||||
// data["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 10 } }];
|
||||
// 设置列宽
|
||||
// data["!cols"] = [{ wch: 50 }, { wch: 20 }, { wch: 40 }];
|
||||
|
||||
// 1.所有表头的宽度
|
||||
const headsWidth = Object.keys(state.data[0]).map(value => { |
||||
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) { |
||||
return parseFloat(value.toString().length * 2.1); |
||||
} else { |
||||
return parseFloat(value.toString().length * 1.1); |
||||
} |
||||
}); |
||||
// console.log("所有表头的宽度：", headsWidth);
|
||||
|
||||
// 2.所有表体值的宽度
|
||||
const rowsWidth = state.data.map(item => { |
||||
// 每行数据中值的宽度
|
||||
const maxValue = Object.values(item).map((value, index) => { |
||||
let valueWidth; |
||||
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) { |
||||
valueWidth = parseFloat(value.toString().length * 2.1); |
||||
} else { |
||||
valueWidth = parseFloat(value.toString().length * 1.1); |
||||
} |
||||
// console.log("每行数据中值的宽度：", valueWidth);
|
||||
|
||||
// 对比出表头和表体值的最大数
|
||||
return Math.max(valueWidth, headsWidth[index]); |
||||
}); |
||||
// console.log("本行值中最大宽度：", maxValue);
|
||||
return maxValue; |
||||
}); |
||||
// console.log("每行数据对比出的最大宽度：", rowsWidth);
|
||||
|
||||
// 3.对比每列最大值
|
||||
let aotuWidth = []; |
||||
rowsWidth.map((row, index) => { |
||||
let maxWidth = []; |
||||
row.map((value, i) => { |
||||
if (index === 0) { |
||||
maxWidth.push({ |
||||
wch: value, |
||||
}); |
||||
} else { |
||||
maxWidth.push({ |
||||
wch: Math.max(value, aotuWidth[i].wch), |
||||
}); |
||||
} |
||||
}); |
||||
aotuWidth = maxWidth; |
||||
}); |
||||
// console.log("每列最大宽度：", aotuWidth);
|
||||
|
||||
// 4.给excel设置自适应宽度
|
||||
worksheet['!cols'] = aotuWidth; |
||||
|
||||
const workbook = XLSX.utils.book_new(); |
||||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); |
||||
const binaryWorkbook = XLSX.write(workbook, { type: 'binary', bookType: 'xlsx' }); |
||||
const blob = new Blob([s2ab(binaryWorkbook)], { type: 'application/octet-stream' }); |
||||
const link = document.createElement('a'); |
||||
link.href = window.URL.createObjectURL(blob); |
||||
link.download = '实例列表.xlsx'; |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
document.body.removeChild(link); |
||||
}; |
||||
|
||||
const s2ab = binaryString => { |
||||
const buffer = new ArrayBuffer(binaryString.length); |
||||
const view = new Uint8Array(buffer); |
||||
for (let i = 0; i < binaryString.length; i++) { |
||||
view[i] = binaryString.charCodeAt(i) & 0xff; |
||||
} |
||||
return buffer; |
||||
}; |
||||
Loading…
Reference in new issue