1.安装依赖xlsx xlsx-style
npm install xlsx xlsx-style --save
2.在对应的vue文件中引入
import XLSX from 'xlsx'
import XLSXD from 'xlsx-style'
// 在引入xlsx-style时会报错
// This relative modules was not found: * ./cptable in ./~/xlsx-style/dist/cpexcel.js
// 两种解决方法:
// 1.找到node_modules\xlsx-style\dist\cpexcel.js 中的 815行的
var cpt = require('./cpt' + 'able')
// 更改为
var cpt = cptable
// 2. 在vue.config.js中修改配置
module.exports = {
configureWebpack: {
externals: {
'./cptable': 'var cptable'
}
}
}
3.在对应的vue文件中开始导出
// 导出按钮
<el-button @click="exportHandler">导出</el-button>
// 要导出的数据
data() {
return {
msgList: [
{ name: '张三', age: 16, sex: '男' },
{ name: '李四', age: 16, sex: '男' },
{ name: '王五', age: 16, sex: '男' }
]
}
}
methods: {
// 导出方法
exportHandler() {
let wb = XLSX.utils.book_new();
let contentWs = XLSX.utils.json_to_sheet(this.msgList);
XLSX.utils.book_append_sheet(wb, contentWs, "人员明细表");
XLSX.writeFile(wb, "人员表.xlsx");
},
}
基本数据导出效果图
image.png
// 自定义表头名称
exportHandler() {
let wb = XLSX.utils.book_new();
// 自定义表头数据
let headers = {
name: "姓名",
age: "年龄",
sex: "性别",
};
// 将表头放入数据源前面
this.msgList.unshift(headers);
let contentWs = XLSX.utils.json_to_sheet(this.msgList, {
header: ['name', 'age', 'sex'], // 可自定义表头顺序
skipHeader: true, // 是否忽略表头,默认为false
});
XLSX.utils.book_append_sheet(wb, contentWs, "人员明细表");
XLSX.writeFile(wb, "人员表.xlsx");
}
自定义表头名称效果图
image.png
// 自定义标题及合并单元格,设置单元格列宽
exportHandler() {
let wb = XLSX.utils.book_new();
let headers = {
name: "姓名",
age: "年龄",
sex: "性别",
};
this.msgList.unshift(headers);
let contentWs = XLSX.utils.json_to_sheet(this.msgList, {
header: ["name", "age", "sex"],
skipHeader: true,
origin: "A2", // 设置插入位置
});
// 单独设置某个单元格内容
contentWs["A1"] = {
t: "s",
v: "人员名单",
};
// 设置单元格合并 !merges 为一个对象数组,每个对象设定了单元格合并的规则,
// {s:{ r: 0, c: 0}, e: { r: 0, c: 2}} 为一个规则, s: 起始位置, e: 结束位置, r: 行, c: 列
contentWs["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];
// 设置列宽
contentWs["!cols"] = [{ wch: 50 }, { wch: 20 }, { wch: 40 }];
XLSX.utils.book_append_sheet(wb, contentWs, "人员明细表");
XLSX.writeFile(wb, "人员表.xlsx");
}
image.png
// 指定单元格设置链接,目前仅使用xlsx写入文件时生效
contentWs["A1"] = {
t: "s",
v: "人员名单",
// 设置链接,及提示
l: {
Target: "http://www.baidu.com",
Tooltip: "点击此链接跳转到百度",
}
}
设置单元格链接效果图
image.png
// 给单元格自定义样式
exportHandler() {
let wb = XLSX.utils.book_new();
let headers = {
name: "姓名",
age: "年龄",
sex: "性别",
};
this.msgList.unshift(headers);
let contentWs = XLSX.utils.json_to_sheet(this.msgList, {
header: ["name", "age", "sex"],
skipHeader: true,
origin: "A2",
});
// 单独设置某个单元格内容
contentWs["A1"] = {
t: "s",
v: "人员名单",
l: {
Target: "http://www.baidu.com",
Tooltip: "点击此链接跳转到百度",
},
// 自定义样式
s: {
font: {
name: "宋体",
sz: 40,
bold: true,
color: { rgb: "FFFFAA00" },
},
alignment: {
horizontal: "center",
vertical: "center",
},
fill: { bgcolor: { rgb: "ffff00" } },
},
};
// 设置单元格自动换行,目前仅对非合并单元格生效
contentWs["A3"].s = {
alignment: {
wrapText: true, // 设置单元格换行
indent: 1 // 设置单元格缩进
}
contentWs["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];
contentWs["!cols"] = [{ wch: 50 }, { wch: 20 }, { wch: 40 }];
XLSX.utils.book_append_sheet(wb, contentWs, "人员明细表");
// 使用xlsx-style写入文件方式,使得自定义样式生效
const tmpDown = new Blob([
this.s2ab(
XLSXD.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "binary",
cellStyles: true,
})
),
]);
this.downExcel(tmpDown, "人员表.xlsx");
},
// 自定义下载文件方法
downExcel(obj, fileName) {
const a_node = document.createElement("a");
a_node.download = fileName;
if ("msSaveOrOpenBlob" in navigator) {
window.navigator.msSaveOrOpenBlob(obj, fileName);
} else {
a_node.href = URL.createObjectURL(obj);
}
a_node.click();
//
setTimeout(() => {
URL.revokeObjectURL(obj);
}, 2000);
},
// 文件流转换
s2ab(s) {
if (typeof ArrayBuffer !== "undefined") {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i != s.length; ++i) {
view[i] = s.charCodeAt(i) & 0xff;
}
return buf;
} else {
const buf = new Array(s.length);
for (let i = 0; i != s.length; ++i) {
buf[i] = s.charCodeAt(i) & 0xff;
}
return buf;
}
},
自定义单元格样式效果图
image.png
以上展示excel的基本导出及部分自定义样式.
单元格对象
image.png
单元格数据类型, t 的可选值
Z)5N6$WN9PTW5KBODAR2)CR.png
