主要使用了插件 js-xlsx
官方 github：https://github.com/SheetJS/js-xlsx
参考博客 小茗同学的博客园 https://www.cnblogs.com/liuxianan/p/js-excel.html
使用方式 参考 小茗同学的博客园的demo（直接去小茗同学的博客园查看介绍更详细）
demo链接：http://demo.haoji.me/2017/02/08-js-xlsx/
进入demo链接 使用鼠标右键 下载网站源码
原生js可以直接参考上面demo直接使用。为防止网站失效我把demo源码下载到了百度云网盘！
下载demo源码
链接： https://pan.baidu.com/s/1MYqmaMQvf4lshkOzjYFXNQ
提取码：qwv7
vue 则需要安装插件
我的是"xlsx": "^0.16.3"版本
安装
npm install xlsx
导入
import XLSX from "xlsx";
使用参考 代码要自己改一下
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
sheet2blob(sheet, sheetName) {
sheetName = sheetName || "sheet1";
var workbook = {
SheetNames: [sheetName],
Sheets: {
}
};
workbook.Sheets[sheetName] = sheet;
// 生成excel的配置项
var wopts = {
// bookType: "xlsx", // 要生成的文件类型
// bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
// type: "binary",
bookType: "xlsx",
bookSST: true,
type: "binary",
defaultCellStyle: this.defaultCellStyle,
cellStyles: true
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream" });
// 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
}
return blob;
},
/**
* 通用的打开下载对话框方法，没有测试过具体兼容性
* @param url 下载地址，也可以是一个blob对象，必选
* @param saveName 保存文件名，可选
*/
openDownloadDialog(url, saveName) {
if (typeof url == "object" && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement("a");
aLink.href = url;
aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent("click");
else {
event = document.createEvent("MouseEvents");
event.initMouseEvent(
"click",
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
);
}
aLink.dispatchEvent(event);
},
// 点击导出
exportSpecialExcel() {
// var data = [
// ["主要信息", null, null, "其它信息"], // 特别注意合并的地方后面预留2个null
// ["姓名", "性别", "年龄", "注册时间"],
// ["张三", "男", 18, new Date()],
// ["李四", "女", 22, new Date()]
// ];
let xlsxName;
if (this.deptLevel == 4) {
xlsxName = "大网格工作量统计分析";
} else if (this.deptLevel == 5) {
xlsxName = "中网格工作量统计分析";
} else if (this.deptLevel == 6) {
xlsxName = "小网格工作量统计分析";
}
let data = [];
data.push([xlsxName]);
let time =
this.$moment(parseInt(this.TablePlanTime)).format("YYYY-MM-DD") +
"至" +
this.$moment(parseInt(this.TableDeadline)).format("YYYY-MM-DD");
data.push(
["统计单位：", this.statUnit],
["统计人：", this.statUser],
["统计日期：", this.nowTime],
["统计期间：", time]
);
let tableHeader = [
"序号",
"网格员名称",
// null,
"所属网格",
"任务总数"
];
this.deptLevel <= 5 ? "" : tableHeader.push("巡检"),
this.deptLevel != 6 ? tableHeader.push("抽检") : "",
(tableHeader = tableHeader.concat(["合格", "联合执法", "过期"]));
data.push(tableHeader);
if (this.tableData.length) {
this.tableData.forEach((item, index) => {
let listArr = [
index + 1,
item.userName,
item.deptName,
item.allNumber
];
this.deptLevel <= 5 ? "" : listArr.push(item.oneNumber),
this.deptLevel != 6 ? listArr.push(item.twoNumber) : "",
(listArr = listArr.concat([
item.threeNumber,
item.fourNumber,
item.fiveNumber
]));
console.log("listArr", listArr);
data.push(Object.values(listArr));
});
data[data.length - 1][0] = "合计";
}
console.error("this.tableData", this.tableData);
var sheet = XLSX.utils.aoa_to_sheet(data);
sheet["!merges"] = [
// 设置A1-J1的单元格合并
{
s: {
r: 0, c: 0 },
e: {
r: 0, c: 9 }
}
];
sheet["!rows"] = [
// 设置第一行表格高度
{
hpx: 50 }
];
sheet["!cols"] = [
// 设置每一列的宽度
{
wpx: 60 },
{
wpx: 100 },
{
wpx: 200 },
{
wpx: 50 },
{
wpx: 50 }
];
this.openDownloadDialog(this.sheet2blob(sheet), xlsxName + ".xlsx");
},
导出 效果
我本人的页面效果
我本人的页面excel导出效果
