js中的导出
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入导出欢迎使用M
·
js中的导出怎么写
1首先写一个导出按钮
import { Button } from 'antd'
import ExcelJS from 'exceljs';
import moment from 'moment';
<Button onClick={this.exportExcal()} >导出</Button>
2.点击导出按钮走onClick事件
exportExcal = () => {
//targetData 为需要导出的数据,类型为数组
let targetData = [
{ name: '张三', age: 25,id_number: '1234567890', phone: '12345678'},
{ name: '李四', age: 25, id_number: '123456789078945', phone: '12345678456' }
]
const data = []
const time = moment(new Date()).format("YYYY年MM月DD日") //获取当前时间
const context = `${time}数据表 `
//data中存入标题信息,分别为:整行的大标题、部分行合并的表格头部、需要上下合并或者正常显示的部分
//null为需要合并的部分,根据表格信息酌情添加
data.push([context, null, null, null, null])
data.push(["姓名", "身份证号", "电话号", '年龄'])
//创建一个工作薄
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet'); //Sheet为活动工作表名
function getABC() {
let str = []
for (let i = 66; i < 92; i++) {
str.push(String.fromCharCode(i))
}
str.push(...['AA', 'AB', 'AC', 'AD'])
return str
}
const abc = getABC()
// const sheet = workbook.addWorksheet('Sheet 1', { views: [{ state: 'frozen', ySplit: 3 }]}) //生成sheet ySplit: 固定显示第几行
data.forEach((i, index) => { // 根据 null ,合并单元格
worksheet.addRow(i)
let isNull = false
let mergeObj = {}
if (index < 2) {
i.forEach((j, k) => {
if (j === null && !isNull && Object.keys(mergeObj).length === 0) {
mergeObj.top = index + 1
mergeObj.left = k
isNull = true
} else if ((j && isNull) || (j === null && k === i.length - 1)) {
isNull = false
mergeObj.bottom = index + 1
mergeObj.right = k
worksheet.mergeCells(mergeObj.top, mergeObj.left, mergeObj.bottom, mergeObj.right)
mergeObj = {}
}
}
)
} else if (index === 2) {
i.forEach((j, k) => {
if (j === null) {
worksheet.mergeCells(`${abc[k]}${index}:${abc[k]}${index + 1}`)
}
})
}
}
)
worksheet.columns = [
{ key: 'name', width: 20 },
{ key: 'id_number', width: 40 },
{ key: 'phone', width: 20 },
{ key: 'age', width: 20 },
];
//将请求道的数据转换存进sheet中
targetData.forEach((i, index) => {
const { name, id_number, phone, age,} = i
worksheet.addRow([ name,id_number, phone,age ])
})
worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
//设置行高,顺便设置第二、第三行表头的字体等
if (rowNumber === 1) {
row.height = 30
row.eachCell((cell) => {
cell.font = {
name: '宋体',
size: 20,
}
})
} else if (rowNumber === 2) {
row.height = 20
row.eachCell((cell, cellNumber) => {
if ((cellNumber > 11 && cellNumber < 12) || (cellNumber > 12 && cellNumber < 16) || (cellNumber > 20 && cellNumber < 26)) {
cell.font = {
name: '宋体',
size: rowNumber === 2 ? 16 : 14,
}
} else {
cell.font = {
name: '宋体',
size: 16,
}
}
})
} else {
//通用行高
row.height = 20
}
//遍历所有包括空的单元格,设置样式等
row.eachCell({ includeEmpty: true }, (cell) => {
cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true } //居中对齐,自动换行
cell.border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' }
}
if (rowNumber > 3) { // 对第三行以上的设置字题
cell.font = {
name: '宋体',
size: 14
}
}
})
})
// 导出文件
const writeFile = (fileName, content) => {
let a = document.createElement('a')
let blob = new Blob([content], { type: 'text/plain' })
a.download = fileName
a.href = URL.createObjectURL(blob)
a.click()
}
workbook.xlsx.writeBuffer().then((buffer) => {
writeFile(`${context}.xlsx`, buffer) //导出文件名
})
}
在这里插入图片描述
3.*注意
要安装excal的依赖包
用的moment.js也需要安装依赖包
moment.js的官网 http://momentjs.cn/,感兴趣的自行学习。
更多推荐
已为社区贡献1条内容
所有评论(0)