当前位置:   article > 正文

前端vue导出excel(标题加粗+表头自定义样式+表格边框+单元格自定义样式)_vue导出表格自定义

vue导出表格自定义

接近过年,被一大堆excel报表烦死的我,遇到要求前端导出excel的后端,差点猝死的我拼命学习中,整理出这篇文章,希望看到这篇文章的你有所收获,也希望能收到大佬们的指点

之前用c#,.net弄过导出word,excel,可以点击查看.NET使用Aspose控件生成Word(可构建自定义表格)、Excel这篇文章

话不多说,进入正题,前端导出excel,使用插件 file-saver、xlsx、xlsx-style,xlsx-style 主要用来优化excel的样式

准备

安装插件 npm install file-saver xlsx xlsx-style --save

引入xlsx-style,发现导出样式依然没反应。需要在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成var cpt = cptable;
但是如果每次打包之前去修改包里的代码很麻烦,如果是多人合作,别人打包的适合也可能不知道直接打包了。所以我去node_modules包里直接修改了xlsx.full.min.js,然后吧文件复制到静态文件夹中,在index.html页面引入即可
image.png

image.png

这一步很重要,笔者就是在这个问题上耗费了整整一下午,非常惨痛的代价

创建导出execl工具文件exportExecl.js

1.table数据导出execl文件

/**
 * table数据导出execl文件
 * @param {*} id:table元素id
 * @param {*} fileName :导出文件名称
 */
function exportExecl(id, fileName, HEADERRANGE, TABLERANGE, REDRANGE = false) {
  let excelName = fileName||'导出表格.xlsx'
  var xlsxParam = { raw: false } // 导出数据是否未加工
  let tables=document.getElementById(id)
  if(!tables) return
  tables = document.getElementById(id).cloneNode(true)
  // 移除固定列,防止重复生成表格
  if (tables.querySelector('.el-table__fixed') !== null) {
    tables.removeChild(tables.querySelector('.el-table__fixed'))
  }
  let table_book = utils.table_to_book(tables, xlsxParam)
  table_book.Sheets.Sheet1 = setTitleClass(table_book.Sheets.Sheet1)
  table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, HEADERRANGE, headerStyle)
  table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, TABLERANGE, contentStyle)
  if (REDRANGE) {
    table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, REDRANGE, redFont)
  }
  table_book.Sheets.Sheet1 = addRangeBorder(table_book.Sheets.Sheet1['!merges'], table_book.Sheets.Sheet1) // 合并项添加边框

  var table_write = XLSX.write(table_book, {
    bookSST: false,
    type: 'binary',
    bookType: 'xlsx'
  })
  try {
      FileSaver.saveAs(
        new Blob([s2ab(table_write)], { type: 'application/octet-stream' }),
        excelName
      )
  } catch (e) {
    console.log(e, table_write)
  }
  return table_write
}
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
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

2.为合并项添加边框

// 为合并项添加边框
function 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'
  ]
  if (range) {
    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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

3.根据需求,我将样式设置提出来作为单独的方法. 可以根据自己的需求加工

const commonStyle = {
  font: { name: '宋体', sz: 11, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false }
}

const titleStyle = {
  font: { name: '黑体', sz: 18, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false }
}

const headerStyle = {
  font: { name: '黑体', sz: 11, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false },
  border: {
    top: { style: 'thin' },
    bottom: { style: 'thin' },
    left: { style: 'thin' },
    right: { style: 'thin' }
  }
  // fill: {
  //   fgColor: { rgb: 'ebebeb' }// 设置标题单元格的背景颜色
  // }
}
const redFont = {
  font: { name: '宋体', sz: 11, bold: false,
    color: {
      rgb: 'FF0000' // 十六进制,不带#
    }
  },
  alignment: { horizontal: 'left', vertical: 'center', wrapText: false }
}

const contentStyle = {
  font: { name: '宋体', sz: 11, bold: false },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false },
  border: {
    top: { style: 'thin' },
    bottom: { style: 'thin' },
    left: { style: 'thin' },
    right: { style: 'thin' }
  }
}
// 设置 标题及公共样式
function setTitleClass(worksheet) {
  // title
  for (const key in worksheet) {
   if (key.indexOf('!') === -1 && worksheet[key].v) {
      if(key == 'A1'){ // title
        worksheet[key].s = titleStyle
      } else {
        worksheet[key].s = commonStyle
      }
   }
  }
  return worksheet
}
// 根据范围和style设置单元格样式
function setCellStyle(worksheet, range, RANGESTYLE) {
  const headerRange = utils.decode_range(range)
  for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {
    for ( let row = headerRange.s.r; row <= headerRange.e.r; row++) {
      const headerCell = utils.encode_cell({ r: row, c: col })
      if( worksheet[headerCell] != undefined) {
        worksheet[headerCell].s = RANGESTYLE
      }
    }
  }
  return worksheet
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81

在 xlsx-style 中,单元格样式共有五个顶级的属性,分别是:fill, font, numFmt, alignmentborder

顶级属性子属性描述类型或可选值默认值
fillpatternType填充模式“solid” or “none”-
fgColor前景色COLOR_SPEC-
bgColor背景色COLOR_SPEC{ indexed: 64}
fontname字体名称string“Calibri”
sz字体大小number12
color字体颜色COLOR_SPEC-
bold加粗boolean-
underline下划线boolean-
italic斜体boolean-
strike瞄边boolean-
outline轮廓boolean-
shadow阴影boolean-
vertAlign垂直对齐boolean-
numFmt-数字格式化“0” // 内置格式的整数索引 “0.00%” // 匹配内置格式的字符串,见下文 “0.0%” // 格式化为自定义格式的字符串 “0.00%;(0.00%);-;@” // 格式化的时候转义特殊字符 “m/dd/yy” // 格式化为日期-
alignmentvertical垂直对齐“bottom”、“center”、“top”-
horizontal水平对齐“left”、“center”、“right”-
wrapText换行boolean-
readingOrder文字方向1、2 // for right-to-left-
textRotation旋转Number from 0 to 180 or 2550
bordertop上边框{ style: BORDER_STYLE, color: COLOR_SPEC }-
bottom下边框{ style: BORDER_STYLE, color: COLOR_SPEC }-
left左边框{ style: BORDER_STYLE, color: COLOR_SPEC }-
right右边框{ style: BORDER_STYLE, color: COLOR_SPEC }-
diagonal对角线{ style: BORDER_STYLE, color: COLOR_SPEC }-
diagonalUp上对角线boolean-
diagonalDown下对角线boolean-

exportExecl.js文件全代码


import FileSaver from 'file-saver'
import { utils } from 'xlsx'

const commonStyle = {
  font: { name: '宋体', sz: 11, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false }
}

const titleStyle = {
  font: { name: '黑体', sz: 18, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false }
}

const headerStyle = {
  font: { name: '黑体', sz: 11, bold: false,
    color: {
      rgb: '000000'
    }
  },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false },
  border: {
    top: { style: 'thin' },
    bottom: { style: 'thin' },
    left: { style: 'thin' },
    right: { style: 'thin' }
  }
  // fill: {
  //   fgColor: { rgb: 'ebebeb' }// 设置标题单元格的背景颜色
  // }
}

const contentStyle = {
  font: { name: '宋体', sz: 11, bold: false },
  alignment: { horizontal: 'center', vertical: 'center', wrapText: false },
  border: {
    top: { style: 'thin' },
    bottom: { style: 'thin' },
    left: { style: 'thin' },
    right: { style: 'thin' }
  }
}

const redFont = {
  font: { name: '宋体', sz: 11, bold: false,
    color: {
      rgb: 'FF0000' // 十六进制,不带#
    }
  },
  alignment: { horizontal: 'left', vertical: 'center', wrapText: false }
}

/**
 * table数据导出execl文件
 * @param {*} id:table元素id
 * @param {*} fileName :导出文件名称
 */
function exportExecl(id, fileName, HEADERRANGE, TABLERANGE, REDRANGE = false) {
  let excelName = fileName||'导出表格.xlsx'
  var xlsxParam = { raw: false } // 导出数据是否未加工
  let tables=document.getElementById(id)
  if(!tables) return
  tables = document.getElementById(id).cloneNode(true)
  // 移除固定列,防止重复生成表格
  if (tables.querySelector('.el-table__fixed') !== null) {
    tables.removeChild(tables.querySelector('.el-table__fixed'))
  }
  let table_book = utils.table_to_book(tables, xlsxParam)
  table_book.Sheets.Sheet1 = setTitleClass(table_book.Sheets.Sheet1)
  table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, HEADERRANGE, headerStyle)
  table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, TABLERANGE, contentStyle)
  if (REDRANGE) {
    table_book.Sheets.Sheet1 = setCellStyle(table_book.Sheets.Sheet1, REDRANGE, redFont)
  }
  table_book.Sheets.Sheet1 = addRangeBorder(table_book.Sheets.Sheet1['!merges'], table_book.Sheets.Sheet1) // 合并项添加边框

  var table_write = XLSX.write(table_book, {
    bookSST: false,
    type: 'binary',
    bookType: 'xlsx'
  })
  try {
      FileSaver.saveAs(
        new Blob([s2ab(table_write)], { type: 'application/octet-stream' }),
        excelName
      )
  } catch (e) {
    console.log(e, table_write)
  }
  return table_write
}
function setCellStyle(worksheet, range, RANGESTYLE) {
  const headerRange = utils.decode_range(range)
  for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {
    for ( let row = headerRange.s.r; row <= headerRange.e.r; row++) {
      const headerCell = utils.encode_cell({ r: row, c: col })
      if( worksheet[headerCell] != undefined) {
        worksheet[headerCell].s = RANGESTYLE
      }
    }
  }
  return worksheet
}

function setTitleClass(worksheet) {
  // title
  for (const key in worksheet) {
   if (key.indexOf('!') === -1 && worksheet[key].v) {
      if(key == 'A1'){ // title
        worksheet[key].s = titleStyle
      } else {
        worksheet[key].s = commonStyle
      }
   }
  }
  return worksheet
}

// 为合并项添加边框
function 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'
  ]
  if (range) {
    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;
}

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 default exportExecl

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182

vue文件引入

由于页面展示的excel五花八门,导出的excel又需要同客户给的excel一致,这里就用了原生的表格。element的表格也是支持导出的

image.png

页面展示
image.png
导出结果
image.png

目前导出还未实现自定义行高列宽,若有大佬有方案,欢迎留言指点,感谢

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码探险家/article/detail/770267
推荐阅读
相关标签
  

闽ICP备14008679号