just-xlsx-export
v1.0.9
Published
A simple npm package for exporting Excel file
Downloads
5
Readme
一个简陋的导出excel,文件格式为xlsx的包,测试vue2/vue3 webpack脚手架中使用没有问题,vite脚手架中使用出现问题,有待后续解决
1.引入npm包
npm i -s just-xlsx-export
2.项目中进行基本使用
<template>
<button @click="exportExcel">导出excel</button>
</template>
<script>
import { getSheets, downloadExcel } from 'just-xlsx-export'
export default {
data () {
return {
data:
[
["", "姓名", "性别", "出生年月", "民族", "籍贯", "政治面貌", "身份证号", "手机号码", "毕业院校", "专业"],
[1, "小虎", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"],
[2, "小鱼", "女", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"],
[3, "大熊", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"],
[4, "大牛", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"]
]
}
},
methods: {
exportExcel () {
// 获取相应数据生成的单元格对象,注意,数据格式为[[],[],[],[],[]]
const sheet = getSheets(this.data)
// 导出excel
downloadExcel(sheet, 'xlsx文件名')
},
}
}
</script>
3.设置单元格宽度,使用单元格合并,单元格文本居中/Set the excel cell width, use cell merging, and center cell text
<template>
<button @click="exportExcel">导出excel</button>
</template>
<script>
import { getSheets, downloadExcel } from 'just-xlsx-export'
export default {
data () {
return {
data:
[
["", "姓名", "性别", "出生年月", "民族", "籍贯", "政治面貌", "身份证号", "手机号码", "毕业院校", "专业"],
[1, "小虎", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"],
[2, "小鱼", "女", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员","123456789012345678", "12345678901", "南京大学", "计算机"],
[3, "大熊", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员","123456789012345678", "12345678901", "南京大学", "计算机"],
[4, "大牛", "男", "1999-06-04", "汉", "江苏-南京市-秦淮区", "共青团员", "123456789012345678", "12345678901", "南京大学", "计算机"]
]
}
},
methods: {
exportExcel () {
const arr = Array(11).fill('')
// 设置需要合并单元格的标题,注意,单元格合并会以单元格首位的文本覆盖所有合并后的单元格中文本,所以这里只需设置首位的文本
arr[0] = '序号'
arr[1] = '我的信息'
arr[4] = '详情信息'
arr[9] = '教育经历'
// 数据是[[],[],[],[]]的形式
const excelData = [arr].concat(this.data)
const sheet = getSheets(excelData)
/// 设置单元格合并,'!merges'相当于设置单元格对象的合并规则,r为纵向合并,c为横向合并
sheet['!merges'] = [
// r为纵向合并,范围是第1列的行1到行2
{ s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
// c为横向合并,范围是第1行的列2到列4
{ s: { r: 0, c: 1 }, e: { r: 0, c: 3 } },
{ s: { r: 0, c: 4 }, e: { r: 0, c: 8 } },
{ s: { r: 0, c: 9 }, e: { r: 0, c: 10 } },
];
// sheet[item].s代表单元格的style,item为单元格的坐标,这里可以设置单元格字体大小,颜色,居中对齐等等,具体参考xlsx-style文档即可
const styleArr = ['A1', 'B1', 'E1', 'J1']
styleArr.forEach(item => {
sheet[item].s = {
// 文本居中
alignment: {
horizontal: 'center',
vertical: 'center',
}
}
})
// 设置宽度,wpx宽度数值,有多少个单元格设置多少个宽度对象即可
sheet['!cols'] = [
{
wpx: 150,
},
{
wpx: 500,
},
{
wpx: 100,
},
{
wpx: 150,
},
{
wpx: 150,
},
{
wpx: 150,
},
{
wpx: 200,
},
];
downloadExcel(sheet, 'xlsx文件名')
},
}
}
</script>