封装xlsx并导出excel文件
介绍
封装方法基于掘金大神一杠,我只是拿过来改造成适合自己使用
使用了简单的封装,可以自定义行高列宽等样式,应该满足大部分导出的需要
感谢: 一杠大神
安装
npm 安装
npm install xlsx@0.16.8
npm install file-saver
npm install xlsx-style-medalsoft
xlsx-style-medalsoft 解决报错问题
在node_modules/xlsx-style-medalsoft/xlsx.js文件里找到write_ws_xml_data方法,在方法上方添加以下代码即可
var DEF_PPI = 96, PPI = DEF_PPI;
function px2pt(px) { return px * 96 / PPI; }
function pt2px(pt) { return pt * PPI / 96; }
xlsx封装的js文件 附带我自己写好的Dome
示例地址 Demo
config 参数说明
config - size 设置列宽-行高大小
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
cols | 列宽,每一个对象对应每一列 | Array | – | [{wpx}]、[{wch}] |
rows | 行高,每一个对象对应每一行 | Array | – | [{hpx}]、[{hch}] |
size 举例
<script>
export default {
data() {
return {
config: {
size: {
cols: [
// 第一列
{ wch: 15 },
// 第二列
{ wch: 15 },
],
rows: [
// 第一行
{ hpx: 20 },
// 第二行
{ hpx: 40 },
],
},
},
}
},
}
</script>
config - merge 合并单元格
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
s | 开始 | Object | – | 范围选择:{ c:列, r:行 } |
e | 结束 | Object | – | 范围选择:{ c:列, r:行 } |
s-c:s-r;e-c:e-r | ---- | ------ | ------ | -------------------------- |
c | 列坐标 | Number | – | – |
r | 行坐标 | Number | – | – |
merge 举例
<script>
export default {
data() {
return {
config: {
merge: [
// A1 - K1 合并
{ s: { c: 0, r: 0 }, e: { c: 10, r: 0 } }
// A3 - K3 合并
{
s: { c: 0, r: 2 },
e: { c: 10, r: 2 },
},
],
},
}
},
}
</script>
config - myStyle 样式设置
具体可以参考xslx官网 npm xlsx-style
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
all | 默认所有样式 | Object | – | – |
rowCells | 统一设置某一行的样式 | Object | – | – |
sepcialCol | 定义特殊列的样式 | Object | – | – |
mergeBorder | 对导出合并单元格无边框的处理,只针对dom导出,因为只有dom导出会出现合并无边框的情况 | Array | [] | – |
all 举例
all: {
font: { name: '宋体', sz: 11, color: { auto: 1
}
},
// 设置边框
border: {
top: {
style: 'thin',
color: {
auto: 1,
},
},
left: {
style: 'thin',
color: {
auto: 1,
},
},
right: {
style: 'thin',
color: {
auto: 1,
},
},
bottom: {
style: 'thin',
color: {
auto: 1,
},
},
},
alignment: {
/// 自动换行
wrapText: 1,
// 居中
horizontal: 'center',
vertical: 'center',
indent: 0,
},
}
rowCells 举例
// 设置第6行样式
6: {
s: {
border: {
top: {
style: 'thin',
color: {
auto: 1,
},
},
left: {
style: 'thin',
color: {
auto: 1,
},
},
right: {
style: 'thin',
color: {
auto: 1,
},
},
bottom: {
style: 'thin',
color: {
auto: 1,
},
},
},
alignment: {
/// 自动换行
wrapText: 1,
// 居中
horizontal: 'center',
vertical: 'center',
indent: 0,
},
font: {
name: '黑体',
sz: 11,
bold: true,
},
},
}
sepcialCol 举例
// 设置A1样式,也就是第一列第一行
A1: {
s: {
font: {
name: '黑体',
sz: 16,
bold: true,
},
alignment: {
horizontal: 'center',
vertical: 'center',
},
},
}
mergeBorder
设置 mergeBorder=[] 即可