1.安裝
npm i xlsx
npm install xlsx-style --save
安裝npm install xlsx-style --save的時(shí)候會(huì)報(bào)錯(cuò)滤钱，處理下就好
需要修改源碼：
1、在\node_modules\xlsx-style\dist\cpexcel.js 807行把 var cpt = require('./cpt' + 'able'); 改成 var cpt = cptable;
2约啊、在\node_modules\xlsx-style\ods.js 10行和12行把路徑改為 require('./xlsx')
2.使用
utils/Blob.js 跟網(wǎng)上其他地方一樣無(wú)區(qū)別红氯，主要是exportExcel，我做了一些修改餐胀，可以?xún)?nèi)容自動(dòng)換行
utils/exportExcel.js
/* eslint-disable */
require('script-loader!file-saver');
require('@/utils/Blob');
require('script-loader!xlsx/dist/xlsx.core.min');
import XLSX from 'xlsx';
import XLSXS from "xlsx-style"
function generateArray(table) {
var out = [];
var rows = table.querySelectorAll('tr');
var ranges = [];
for (var R = 0; R < rows.length; ++R) {
var outRow = [];
var row = rows[R];
var columns = row.querySelectorAll('td');
for (var C = 0; C < columns.length; ++C) {
var cell = columns[C];
var colspan = cell.getAttribute('colspan');
var rowspan = cell.getAttribute('rowspan');
var cellValue = cell.innerText;
if (cellValue !== '' && cellValue == +cellValue) cellValue = +cellValue;
//Skip ranges
ranges.forEach(function (range) {
if (
R >= range.s.r &&
R <= range.e.r &&
outRow.length >= range.s.c &&
outRow.length <= range.e.c
) {
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
}
});
//Handle Row Span
if (rowspan || colspan) {
rowspan = rowspan || 1;
colspan = colspan || 1;
ranges.push({
s: {
r: R,
c: outRow.length
},
e: {
r: R + rowspan - 1,
c: outRow.length + colspan - 1
}
});
}
//Handle Value
outRow.push(cellValue !== '' ? cellValue : null);
//Handle Colspan
if (colspan)
for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
}
out.push(outRow);
}
return [out, ranges];
}
function datenum(v, date1904) {
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}
function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = {
s: {
c: 10000000,
r: 10000000
},
e: {
c: 0,
r: 0
}
};
for (var R = 0; R != data.length; ++R) {
for (var C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell = {
v: data[R][C]
};
if (cell.v == null) continue;
var cell_ref = XLSX.utils.encode_cell({
c: C,
r: R
});
if (typeof cell.v === 'number') cell.t = 'n';
else if (typeof cell.v === 'boolean') cell.t = 'b';
else if (cell.v instanceof Date) {
cell.t = 'n';
cell.z = XLSX.SSF._table[14];
cell.v = datenum(cell.v);
} else cell.t = 's';
ws[cell_ref] = cell;
}
}
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
return ws;
}
function Workbook() {
if (!(this instanceof Workbook)) return new Workbook();
this.SheetNames = [];
this.Sheets = {};
}
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;
}
export function export_table_to_excel(id) {
var theTable = document.getElementById(id);
var oo = generateArray(theTable);
var ranges = oo[1];
/* original data */
var data = oo[0];
var ws_name = 'SheetJS';
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);
/* add ranges to worksheet */
// ws['!cols'] = ['apple', 'banan'];
ws['!merges'] = ranges;
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
});
saveAs(
new Blob([s2ab(wbout)], {
type: 'application/octet-stream'
}),
'test.xlsx'
);
}
//導(dǎo)出表格
export function export_json_to_excel({
header,
data,
filename = 'excel-list',
autoWidth = true,
merges = [],
multiHeader = [],
} = {}) {
/* original data */
data = [...data];
data.unshift(header);
for (let i = multiHeader.length - 1; i > -1; i--) {
data.unshift(multiHeader[i])
}
var ws_name = 'SheetJS';
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);
for (let key in ws) {
if (ws[key] instanceof Object) {
ws[key].s = {
alignment: {
wrapText: true, //自動(dòng)換行
},
}
}
}
// 合并單元格
if (merges.length > 0) {
if (!ws['!merges']) ws['!merges'] = [];
merges.forEach(item => {
ws['!merges'].push(XLSX.utils.decode_range(item))
})
}
if (autoWidth) {
let colWidths = [];
// 計(jì)算每一列的所有單元格寬度
// 先遍歷行
data.forEach((row) => {
// 列序號(hào)
let index = 0
// 遍歷列
for (const key in row) {
if (colWidths[index] == null) colWidths[index] = []
switch (typeof row[key]) {
case 'string':
case 'number':
case 'boolean':
// 判斷數(shù)據(jù)是否有\(zhòng)n棚蓄，且自動(dòng)換行
var reg = RegExp(/\n/);
if(reg.test(row[key])){
let result=row[key].split('\n')
let arr=result.map((v)=>{
return v.length
})
let maxIndex=Math.max(...arr);
let indexs=result.findIndex(ele=>ele.length==maxIndex)
// 判斷是否為中文
if(result[indexs].toString().charCodeAt(0) > 255){
colWidths[index].push(result[indexs].toString().length*2)
}else{
colWidths[index].push(result[indexs].length)
}
}else{
colWidths[index].push(getCellWidth(row[key]))
}
break
case 'object':
case 'function':
colWidths[index].push(0)
break
}
index++
}
})
ws['!cols'] = [];
colWidths.forEach((widths, index) => {
// 計(jì)算列頭的寬度
widths.push(getCellWidth(header[index]))
// 設(shè)置最大值為列寬
ws['!cols'].push({
wch: Math.max(...widths).toFixed(0)
})
})
}
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSXS.write(wb, {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
});
saveAs(
new Blob([s2ab(wbout)], {
type: 'application/octet-stream'
}),
filename + '.xlsx'
);
}
// 計(jì)算列寬
export function getCellWidth(value) {
if (value == null) {
return 10
} else if (value.toString().charCodeAt(0) > 255) {
// 判斷是否包含中文
let length = value.toString().length * 2
if (length > 60) {
length = length - 40
//這里的寬度可以自己設(shè)定靶累，在前面設(shè)置wrapText: 1可以在單元格內(nèi)換行
}
return length
} else {
return value.toString().length * 1.2
}
}
3.頁(yè)面中的使用
exportReport() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
});
exportTiCategoryExcelData(this.param)
.then((res) => {
loading.close();
if (res.data.code == 0) {
let tabData = res.data.data;
let thead = ['嚴(yán)重級(jí)別','類(lèi)型','關(guān)聯(lián)請(qǐng)求方', '線(xiàn)路', '請(qǐng)求數(shù)'];
let keys = ['level','category','client', 'view', 'count'];
/* 導(dǎo)出表格 */
import('@/utils/exportExcel').then((excel) => {
const theader = JSON.parse(JSON.stringify(thead));
const filterVal = JSON.parse(JSON.stringify(keys));
const data = this.formatJSON(
filterVal,
JSON.parse(JSON.stringify(tabData))
);
excel.export_json_to_excel({
header: theader,
data,
filename: '威脅事件視角',
});
});
}
})
.catch(() => {
loading.close();
});
},
formatJSON(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
return v[j];
})
);
},
-圖中是一些，excel 樣式設(shè)置屬性
image.png
image.png
4.導(dǎo)出單個(gè)excel文件含有多張表
exportExcel.js增加了導(dǎo)出多張表的代碼
// 導(dǎo)出多個(gè)sheet
export function export2ExcelMultiSheet(jsonData, defaultTitle) {
let data = jsonData;
//添加標(biāo)題
for (let item of data) {
item.data.unshift(item.th);
}
let wb = new Workbook();
//生成多個(gè)sheet
for (let item of data) {
wb.SheetNames.push(item.sheetTitle)
let ws=sheet_from_array_of_arrays(item.data)
let header=item.th
let colWidths = [];
// 計(jì)算每一列的所有單元格寬度
// 先遍歷行
item.data.forEach((row) => {
// 列序號(hào)
let index = 0
// 遍歷列
for (const key in row) {
if (colWidths[index] == null) colWidths[index] = []
switch (typeof row[key]) {
case 'string':
case 'number':
case 'boolean':
// 判斷數(shù)據(jù)是否有\(zhòng)n癣疟，且自動(dòng)換行
var reg = RegExp(/\n/);
if(reg.test(row[key])){
let result=row[key].split('\n')
let arr=result.map((v)=>{
return v.length
})
let maxIndex=Math.max(...arr);
let indexs=result.findIndex(ele=>ele.length==maxIndex)
// 判斷是否為中文
if(result[indexs].toString().charCodeAt(0) > 255){
colWidths[index].push(result[indexs].toString().length*2)
}else{
colWidths[index].push(result[indexs].length)
}
}else{
colWidths[index].push(getCellWidth(row[key]))
}
break
case 'object':
case 'function':
colWidths[index].push(0)
break
}
index++
}
})
ws['!cols'] = [];
colWidths.forEach((widths, index) => {
// 計(jì)算列頭的寬度
widths.push(getCellWidth(header[index]))
// 設(shè)置最大值為列寬
ws['!cols'].push({
wch: Math.max(...widths).toFixed(0)
})
})
wb.Sheets[item.sheetTitle] = ws;
}
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
var title = defaultTitle || '列表'
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}
5.頁(yè)面引用
exportExcel(tableDataAll,tableDataTime,tableDataAddr){
// 要導(dǎo)出的數(shù)據(jù)中 對(duì)應(yīng)的key
let filterVal = Object.keys(this.classfiys);
let filterVal2 = ['time'].concat(Object.keys(this.classfiys))
let filterVal3 = ['addr'].concat(Object.keys(this.classfiys))
let tableAll=[]
let obj={}
for (const key in tableDataAll) {
if (Object.hasOwnProperty.call(tableDataAll, key)) {
const element = tableDataAll[key];
if(key!=='addr_data'&&key!=='time_data'){
obj[key]=element
}
}
}
tableAll.push(obj)
let result = [
{
th: Object.values(this.classfiys), //表頭
data: this.formatJSON(filterVal, tableAll), //格式化的數(shù)據(jù)
sheetTitle: "全部",// sheet名稱(chēng)
},
{
th: ["時(shí)間"].concat(Object.values(this.classfiys)),
data: this.formatJSON(filterVal2, tableDataTime),
sheetTitle: "時(shí)間",
},
{
th: ["地址"].concat(Object.values(this.classfiys)),
data: this.formatJSON(filterVal3, tableDataAddr),
sheetTitle: "地址",
},
];
require.ensure([], () => {
let { export2ExcelMultiSheet } = require("@/utils/exportExcel");
export2ExcelMultiSheet(result, "告警報(bào)表");
});
},
formatJSON(filterVal, jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
return v[j];
})
);
},
- 參考地址
https://blog.csdn.net/qq_42688511/article/details/122732575?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2.pc_relevant_aa&utm_relevant_index=5
https://blog.csdn.net/FE_dev/article/details/106396416
