用exceljs方法,设置导出excel表格的样式,比如居中,宽度,修改颜色等等。
exportExcel() {
// 导出的表头
let columns = [
{ name: "中国" },
{ name: "美国" },
{ name: "英国" },
{ name: "法国" },
{ name: "德国" }
];
// 引入 exceljs,自己灵活引入
let exceljs = require("exceljs");
let excel = new exceljs.Workbook();
let monthSheet = excel.addWorksheet("excel的文件名");
monthSheet.addTable({
// 插入到多少行,自己设置
ref: "A1",
style: {
// 风格
theme: "TableStyleLight11"
},
columns,
// 表体的内容,与表头顺序对应
rows: this.tableData.map((one, i) => [
one.stage9,
one.stage8,
one.stage7,
one.stage6,
one.stage5
])
});
columns.forEach((item, i) => {
// 设置样式,更多样式去看文档
monthSheet.getColumn(i + 1).width = 10;
monthSheet.getColumn(i + 1).alignment = {
vertical: "middle",
horizontal: "center"
};
});
excel.xlsx.writeBuffer().then(buffer => {
// 下载excel
let saver = require("file-saver");
saver.saveAs(
new Blob([buffer], { type: "application/octet-stream" }),
this.$route.meta.title + ".xlsx"
);
});
}
以上是编程学习网小编为您介绍的“vuejs导出excel表格(可以设置样式)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:vuejs导出excel表格(可以设置样式)
基础教程推荐
猜你喜欢
- vue 跨域代理404 第一个有效,其他都无效 2023-10-08
- vue post application/x-www-form-urlencoded传参的解决方案 2023-10-08
- Vuex实现计数器以及列表展示效果 2024-01-16
- 使用cookie绕过验证码登录的实现代码 2024-02-11
- vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误解决 2023-07-09
- elementUI起步按需引用配置(vue+npm) 2023-10-08
- 微信小程序:数据存储、传值、取值详解 2023-12-13
- CSS让子容器超出父元素(子容器悬浮在父容器效果) 2023-12-09
- Vue3子传父$emit(组件之间通信) 2023-10-08
- ajax三级联动的实现方法 2023-01-31
