Vue中使用js-xlsx导出Data数据到Excel
2024-09-03 22:54:25
需要引入的第三方JS有：export.js、xlsx.extendscript.js、xlsx.full.min.js
JS太大不贴出来，放一个可下载百度云连接:https://pan.baidu.com/s/1jmu9UktuEZVnZ5B0ZWOb8w 提取码:pn6x
拜读两位大佬的文章：
HTML部分：
<button type="button" class="bt_css_s" @click="btn_export">导出</button>
JS部分：
btn_export: function () {
var that = this;
//要导出去的标题
var arry = [['项目进度ID', '项目详情ID', '项目名称', '计划进度', '开始时间', '结束时间', '本年投资计划完成', '进度描述', '进度差异原因']];
// that.Data指要导出的数据
that.Data.map(a => {
var _arry = [];
_arry.push(a.ID.toString());
_arry.push(a.JHPID.toString());
_arry.push(a.NAME.toString());
_arry.push(a.JHJD.toString());
_arry.push(a.KSSJ == null ? "" : a.KSSJ.format('yyyy-MM-dd')); //格式化日期没有就返回空
_arry.push(a.JSSJ == null ? "" : a.KSSJ.format('yyyy-MM-dd')); //格式化日期没有就返回空
_arry.push(a.BNWC.toString());
_arry.push(a.JDMS.toString());
_arry.push(a.CYYY.toString());
return _arry;
}).forEach(a => {
arry.push(a);
});
var sheet = XLSX2.utils.aoa_to_sheet(arry);
//循环单元格设置样式
var s = sheet['!ref'];
sheet["A2"].s = {
font: {
name: '宋体',
sz: 18,
color: { rgb: "#FFFF0000" },
bold: true,
italic: false,
underline: false
},
alignment: {
horizontal: "center",
vertical: "center"
}
};
var rows = s.substr(s.length - 1, 1);
var cloums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
for (var j = 0; j < cloums.length; j++) {
for (var i = 1; i <= rows; i++) {
if (i == 1) {
sheet[cloums[j] + i].s = { //样式
font: {
bold: true,
italic: false,
underline: false
},
alignment: {
horizontal: "left",
vertical: "left",
wrap_text: false
}
};
}
else {
sheet[cloums[j] + i].s = { //样式
alignment: {
horizontal: "left",
vertical: "left",
wrap_text: false
}
};
}
}
}
sheet["!cols"] = [{
wpx: 90
}, {
wpx: 90
}, {
wpx: 90
}, {
wpx: 90
}, {
wpx: 150
}, {
wpx: 150
}, {
wpx: 180
}, {
wpx: 150
}, {
wpx: 150
}, {
wpx: 150
}, {
wpx: 70
}, {
wpx: 150
}, {
wpx: 120
}]; //单元格列宽
openDownloadDialog(sheet2blob(sheet), that.format(new Date()) + '进度导出管理.xlsx');
}
最新文章
- js 日期时间排序 数组
- C++ 隐式类类型转换
- 数位DP HDU3555
- 集合框架Map之entrySet方法的使用
- iOS中的地图和定位
- 快速构建Windows 8风格应用24-App Bar构建
- QuickSwitchSVNClient，快速完成SVN Switch的工具
- Nmap的使用【转载】
- C/C++ char数组存储字符串内存地址
- Java学习笔记12---向上转型-父类的对象引用指向子类对象
- nginx配置https双向验证（ca机构证书+自签证书）
- python基础学习（二）注释和算术运算符
- Golang的Json encode/decode以及[]byte和string的转换
- tp5.0中及其常用方法的一些函数方法(自己看)和技巧（不断添加中）
- day44前端开发1之html基础
- C# Windows IPSEC监控（仅此一家，别无分店）
- hadoop2.7的目录结构
- PHP函数总结 （五）
- SpringMVC框架 SpringMVC的获取01
- 根据Unicode码生成汉字