vue使用Export2Excel.js导出表格自定义样式（表头加分割斜线）（笔记）

1、Export2Excel.js 文件内容

/* eslint-disable */
/** 导出Excel需要依赖
* npm install xlsx file-saver -S
* npm install script-loader -S -D
*/import { saveAs } from 'file-saver'
// import XLSX from 'xlsx'
import XLSX from 'xlsx-style' //添加斜线这样引入XLSXfunction 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 rangesranges.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 Spanif (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 ValueoutRow.push(cellValue !== "" ? cellValue : null);//Handle Colspanif (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, fontStyle) {var ws = {};var range = {s: {c: 10000000,r: 10000000},e: {c: 0,r: 0}};let _opts = []if (opts) {_opts = opts}console.log('data==', data)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 (_opts) {if (R == _opts[0] && C == _opts[1]) {cell = {v: data[R][C],s: defaultCellStyle}}}//给某一单元格的字体自定义样式if (fontStyle) {if (R == data.length - 3 && C == 1) {cell = {v: data[R][C],s: fontCellStyle}}}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;
}let fontCellStyle = {font: {name: '宋体',sz: 18,color: { rgb: "ff0000" },bold: true,},alignment: {//对齐方式horizontal: 'center',//水平居中vertical: 'center',//竖直居中},
}let defaultCellStyle = {alignment: {horizontal: 'center',vertical: 'center',indent: 0},border: {diagonalDown: true,//斜线方向diagonal: {color: { rgb: '303133' },style: 'thin'}//diagonalDown与diagonal必须同时使用}
}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")
}export function export_json_to_excel ({multiHeader = [],header,data,filename,merges = [],maxWidth = '',autoWidth = true,bookType = 'xlsx',diagonal = [],//斜线fontStyle = false,
} = {}) {/* original data */filename = filename || 'excel-list'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()//加样式，如斜线if (diagonal) {var ws = sheet_from_array_of_arrays(data, diagonal, fontStyle);} else {var ws = sheet_from_array_of_arrays(data);}//此处可根据自己习惯做判断应用if (merges.length > 0) {if (!ws['!merges']) ws['!merges'] = [];merges.forEach(item => {ws['!merges'].push(XLSX.utils.decode_range(item))})}if (autoWidth) {/*设置worksheet每列的最大宽度*/const colWidth = data.map(row => row.map(val => {/*先判断是否为null/undefined*/if (val == null) {return {'wch': 10};}/*再判断是否为中文*/else if (val.toString().charCodeAt(0) > 255) {return {'wch': maxWidth ? val.toString().length * 2 > maxWidth ? maxWidth : val.toString().length * 2 : val.toString().length * 2};} else {return {'wch': maxWidth ? val.toString().length > maxWidth ? maxWidth : val.toString().length : val.toString().length};}}))/*以第一行为初始值*/let result = colWidth[0];for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j]['wch'] < colWidth[i][j]['wch']) {result[j]['wch'] = colWidth[i][j]['wch'];}}}ws['!cols'] = result;}if (fontStyle) {}/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, {bookType: bookType,bookSST: false,type: 'binary'});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), `${filename}.${bookType}`);
}

处理导出数据js

// 导出数据 转换成Excel表格需要的二维数组
export function formatJson (filterVal, jsonData, fun) {return jsonData.map(v =>filterVal.map(j => {if (fun) {return fun(j, v[j])} else {return v[j]}}))
}

vue页面html使用

import { letterArr } from '@/api'
import { formatJson} from "@/utils/index"
import('@/utils/Export2Excel').then(excel => {let tHeader = ['日期', '门票名称'']let filterVal = ['createTime', 'ticketName']let merges = []const merges_arr = [this.A_row_merge, this.B_row_merge]// 列合并,this.A_row_merge，this.B_row_merge为需要合并的列，在获取数据列表时做处理，格式为[[1,3],[4,5],[7,9]]for (let i = 0; i < merges_arr.length; i++) {const row_merge = merges_arr[i];for (let j = 0; j < row_merge.length; j++) {const element = row_merge[j];merges.push(`${letterArr[i]}${element[0] + 2}:${letterArr[i]}${element[1] + 2}`)}}const data = formatJson(filterVal, dataList)let filename = `销售汇总`excel.export_json_to_excel({header: tHeader, //表头 必填data, //具体数据 必填merges,diagonal: [0, 3],//斜线位置（第一行第四列）filename: filename, //非必填})})

样式自定义相关属性中文参考：https://segmentfault.com/a/1190000022772664
相关链接（英文）：
https://www.npmjs.com/package/xlsx-style

vue使用Export2Excel.js导出表格自定义样式（表头加分割斜线）（笔记）相关推荐

vue 基于 Export2Excel.js 导出 Excel
1. 安装两个依赖包 npm install -S file-saver npm install -S xlsx 2. 引入 Export2Excel.js 文件 import { exportJso ...
vue table使用colgroup进行表格自定义宽度
vue table使用colgroup进行表格自定义宽度在默认情况下table表格的宽度是根据表格内容进行分配的想自定义宽度可以通过colgroup标签配合col标签设置: col的个数与表格的列 ...
vue table表格中只有表头加竖线分割
table表格中只有表头加竖线分割给<el-table>加一个属性 : :header-cell-style="{'border-right':'1px solid #8888 ...
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
Vue使用Export2Excel导出表格时隐藏表头
真实需求并不是要隐藏表头,而是因为后端返回的数据就把表头给拼上去了... 所以不能再加一个header. 直接再代码中不写header,会报错 excel.export_json_to_excel({ ...
前端导出excel自定义样式(行高除外)
前端导出excel需要用到的依赖有xlsx.xlsx-style import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; npm in ...
使用ExcelJs导出表格设置样式、添加边框
需要用到exceljs和fileSaver 分别用npm安装一下 npm install -S exceljs npm install -S file-saver 创建一个js文件,用于存放导出的方法 ...
使用easyexcel完成复杂表头及标题的导出功能(自定义样式及多sheet导出)
如需客户端指定excel版本,只需要判断后缀名然后在controller中的.excelType(ExcelTypeEnum.XLS)做指定输出内容格式即可 ***(注意表格行高列宽统一设置是在实体类 ...
easyexcel 设置标题_使用easyexcel完成复杂表头及标题的导出功能(自定义样式)
如需客户端指定excel版本,只需要判断后缀名然后在controller中的.excelType(ExcelTypeEnum.XLS)做指定输出内容格式即可 ***(注意表格行高列宽统一设置是在实体类 ...

vue使用Export2Excel.js导出表格自定义样式（表头加分割斜线）（笔记）

vue使用Export2Excel.js导出表格自定义样式（表头加分割斜线）（笔记）相关推荐

最新文章

热门文章