|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div><el-button @click="exportExcel" size="small" type="warning">导出数据2</el-button></div> |
|
|
|
<div><el-button @click="exportExcel" size="small" type="warning">导出数据</el-button></div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import XLSX from "xlsx"; |
|
|
|
@ -7,6 +7,23 @@ import XLSXS from "xlsx-style"; |
|
|
|
import FileSaver from "file-saver"; |
|
|
|
export default { |
|
|
|
name: "exportExcel", |
|
|
|
props:{ |
|
|
|
// 报表标题 |
|
|
|
title:{ |
|
|
|
type: String, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 报表名称 |
|
|
|
reportName:{ |
|
|
|
type: String, |
|
|
|
default: '导出' |
|
|
|
}, |
|
|
|
// 导出数据 |
|
|
|
excelData:{ |
|
|
|
type: Array, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
}, |
|
|
|
data () { |
|
|
|
return { |
|
|
|
|
|
|
|
@ -20,89 +37,95 @@ export default { |
|
|
|
return buf; |
|
|
|
}, |
|
|
|
exportExcel(){ |
|
|
|
// 设置表头 |
|
|
|
let _head = [] |
|
|
|
for(let item in this.excelData[0]){ |
|
|
|
_head.push(item) |
|
|
|
} |
|
|
|
|
|
|
|
// 设置标题 |
|
|
|
let _title = [this.title] |
|
|
|
for(let i =0;i<_head.length - 1;i++){ |
|
|
|
_title.push(null) |
|
|
|
} |
|
|
|
|
|
|
|
// 设置内容 |
|
|
|
let excelAllData = [ |
|
|
|
_title,// 标题 |
|
|
|
_head, // 表头 |
|
|
|
] |
|
|
|
|
|
|
|
// 需要导出的数据 |
|
|
|
let excelData = [ |
|
|
|
["幼儿园课表", null, null, null], // 标题 |
|
|
|
["序号", "课程名称", "教师名称", "上课地点"], // 表头 |
|
|
|
["11.1234", "11,211.1234", "11.1234", "操场"], |
|
|
|
["11.1234", "11,211.1234", "11.1234", "操场"], |
|
|
|
["11.1234", "11,211.1234", "11.1234", "操场"], |
|
|
|
["11.1234", "11,211.1234", "11.1234", "操场"], |
|
|
|
["11.1234", "11,211.1234", "11.1234", "操场"], |
|
|
|
]; |
|
|
|
this.excelData.forEach((item,key)=>{ |
|
|
|
let _row = [] |
|
|
|
_head.forEach(head_item=>{ |
|
|
|
_row.push(item[head_item]) |
|
|
|
}) |
|
|
|
excelAllData.push(_row) |
|
|
|
}) |
|
|
|
|
|
|
|
// 导出的excel文件名 |
|
|
|
const filename = "幼儿园课程表.xlsx"; |
|
|
|
const filename = this.reportName+".xlsx"; |
|
|
|
|
|
|
|
// Excel第一个sheet的名称 |
|
|
|
const ws_name = "Sheet1"; |
|
|
|
const wb = XLSX.utils.book_new(); |
|
|
|
const ws = XLSX.utils.aoa_to_sheet(excelData); |
|
|
|
const ws = XLSX.utils.aoa_to_sheet(excelAllData); |
|
|
|
XLSX.utils.book_append_sheet(wb, ws, ws_name); // 将数据添加到工作薄 |
|
|
|
|
|
|
|
// 设置标题行单元格合并 |
|
|
|
// s即start, e即end, r即row, c即column |
|
|
|
// 合并从--0行0列开始,到0行3列 |
|
|
|
ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }]; |
|
|
|
ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: _head.length - 1 } }]; |
|
|
|
|
|
|
|
// 设置单元格宽度 |
|
|
|
ws["!cols"] = [ |
|
|
|
{ |
|
|
|
wpx: 40, |
|
|
|
}, |
|
|
|
{ |
|
|
|
wpx: 100, |
|
|
|
}, |
|
|
|
{ |
|
|
|
wpx: 100, |
|
|
|
}, |
|
|
|
{ |
|
|
|
wpx: 100, |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
/* |
|
|
|
设置单元格其他样式 |
|
|
|
这里列举一部分,其他样式大同小异,自行网上搜索 |
|
|
|
*/ |
|
|
|
// ws["!cols"] = [ |
|
|
|
// {wpx: 40,}, |
|
|
|
// {wpx: 100,}, |
|
|
|
// {wpx: 100,}, |
|
|
|
// {wpx: 100,}, |
|
|
|
// ]; |
|
|
|
|
|
|
|
// 可以遍历全部单元格,进行样式设置 |
|
|
|
console.log(91,ws) |
|
|
|
// 设置单元格其他样式 可以遍历全部单元格,进行样式设置 |
|
|
|
for (let i in ws) { |
|
|
|
if (i === "B2") { |
|
|
|
// 标题居中 |
|
|
|
if(i == "A1"){ |
|
|
|
ws[i].s = { |
|
|
|
// 居中 |
|
|
|
alignment: { |
|
|
|
horizontal: "center", |
|
|
|
vertical: "center", |
|
|
|
wrapText: true, |
|
|
|
}, |
|
|
|
// 字体 |
|
|
|
font: { |
|
|
|
name: "仿宋", |
|
|
|
sz: 14, |
|
|
|
bold: true, |
|
|
|
}, |
|
|
|
}; |
|
|
|
} else if (i === "B3") { |
|
|
|
ws[i].s = { |
|
|
|
// 单元格边框 |
|
|
|
border: { |
|
|
|
top: { |
|
|
|
style: "thin", |
|
|
|
}, |
|
|
|
bottom: { |
|
|
|
style: "thin", |
|
|
|
}, |
|
|
|
left: { |
|
|
|
style: "thin", |
|
|
|
}, |
|
|
|
right: { |
|
|
|
style: "thin", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
} |
|
|
|
// if (i === "B2") { |
|
|
|
// ws[i].s = { |
|
|
|
// // 字体 |
|
|
|
// font: { |
|
|
|
// name: "仿宋", |
|
|
|
// sz: 14, |
|
|
|
// bold: true, |
|
|
|
// }, |
|
|
|
// }; |
|
|
|
// } else if (i === "B3") { |
|
|
|
// ws[i].s = { |
|
|
|
// // 单元格边框 |
|
|
|
// border: { |
|
|
|
// top: { |
|
|
|
// style: "thin", |
|
|
|
// }, |
|
|
|
// bottom: { |
|
|
|
// style: "thin", |
|
|
|
// }, |
|
|
|
// left: { |
|
|
|
// style: "thin", |
|
|
|
// }, |
|
|
|
// right: { |
|
|
|
// style: "thin", |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }; |
|
|
|
// } |
|
|
|
} |
|
|
|
|
|
|
|
// 导出Excel, 注意这里用到的是XLSXS对象 |
|
|
|
|
