vue前端实现导出,文字居中可修改样式哦(宽高等)如此简单~~
1.安装依赖
npm install --save xlsx file-saver
npm install --save xlsx-style2.哪个页面使用哪个页面引入
import FileSaver from "file-saver";
import XLSX2 from "xlsx";
import XLSX from "xlsx-style";3.效果图（可以实现多表头，也可以实现单行表头）
4.页面表格需要有id（element iview都可以）
还需要一个按钮
导出5.下面数据写在data里面 也可以改成你自己需要的数据
columns13: [
{
title: 'Date',
key: 'date',
resizable: true,
width: 180
},
{
title: 'Name',
key: 'name',
resizable: true,
width: 180
},
{
title: 'Age',
key: 'age',
resizable: true,
width: 180
},
{
title: 'Address',
key: 'address'
}
],
data5: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]6 .下面方法写在 methods 里面
setExport2Excel() {
/* generate workbook object from table */
var wb = XLSX2.utils.table_to_sheet(document.querySelector("#mytable")); //mytable为表格的id名
console.log(wb)
for (var i = 0; i < 11; i++) {
wb["!cols"][i] = {
wpx: 130,
};
}
// 样式的文档地址
// https://www.npmjs.com/package/xlsx-style
for (const key in wb) {
if (key.indexOf("!") === -1 && wb[key].v) {
wb[key].s = {
font: {
//字体设置
sz: 13,
bold: false,
color: {
rgb: "000000", //十六进制，不带#
},
},
alignment: {
//文字居中
horizontal: "center",
vertical: "center",
wrap_text: true,
},
border: {
// 设置边框
top: {
style: "thin",
},
bottom: {
style: "thin",
},
left: {
style: "thin",
},
right: {
style: "thin",
},
},
};
}
}
var data = this.addRangeBorder(wb["!merges"], wb); //合并项添加边框
// 暂无筛选结果 (这个位置 如果导出之后页面出现无名数据,这个暂无筛选结果,就是我写的时候的无名数据,莫名其妙就出现了,把这个不需要的,替换掉我的文字即可)
for(let i in data){
console.log(data[i].v)
if(data[i].v == '暂无筛选结果') delete data[i]
}
var filedata = this.sheet2blob(data);
this.openDownloadDialog(filedata,"日收统计.xlsx");
},
//为合并项添加边框
addRangeBorder(range, ws) {
let arr = [
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
];
// range.forEach((item) => {
// let startColNumber = Number(item.s.r),
// endColNumber = Number(item.e.r);
// let startRowNumber = Number(item.s.c),
// endRowNumber = Number(item.e.c);
// const test = ws[arr[startRowNumber] + (startColNumber + 1)];
// for (let col = startColNumber; col <= endColNumber; col++) {
// for (let row = startRowNumber; row <= endRowNumber; row++) {
// ws[arr[row] + (col + 1)] = test;
// }
// }
// });
return ws;
},
//将一个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",
};
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;
},
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);
},