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>
// 要導出的數(shù)據(jù)
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");
},
}
基本數(shù)據(jù)導出效果圖
image.png
// 自定義表頭名稱
exportHandler() {
let wb = XLSX.utils.book_new();
// 自定義表頭數(shù)據(jù)
let headers = {
name: "姓名",
age: "年齡",
sex: "性別",
};
// 將表頭放入數(shù)據(jù)源前面
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 為一個對象數(shù)組,每個對象設定了單元格合并的規(guī)則,
// {s:{ r: 0, c: 0}, e: { r: 0, c: 2}} 為一個規(guī)則, 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
單元格數(shù)據(jù)類型, t 的可選值
Z)5N6$WN9PTW5KBODAR2)CR.png
