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

最新推荐文章于 2024-06-03 16:46:10 发布
最新推荐文章于 2024-06-03 16:46:10 发布
阅读量2.3k 收藏 23
点赞数 17
文章标签： 前端 vue.js excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/minmin_web/article/details/135676357
版权

接近过年，被一大堆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
}

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;
}

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
}

在 xlsx-style 中，单元格样式共有五个顶级的属性，分别是：fill, font, numFmt, alignment 和 border。

顶级属性子属性描述类型或可选值默认值
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

vue文件引入

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

image.png

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

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

依米__
关注
  • 17
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
VUE导出Excel，两种方法，方法二带样式：文字居中，自动换行，列宽设置，单元格合并，冻结表头等
03-29
SheetJS免费版的不支持格式，比如居中、自动换行都不行。xlsx-style是SheetJS的一个分支，且支持各种格式，可以做到文字居中，自动换行，列宽设置，单元格合并，冻结表头等。
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格）
08-30
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格），适用于前端开发人员，在非分页场景下对于table的导出。 主要方法：_export_table_to_excel()，在ExportExcel.js中 其中：import vues from "../../main";为main.js中的new Vue();可以参照本人项目中的代码： var vues = new Vue(); export default vues; 参数说明及注释： /** * id:table_id -必填 * name: excel_name * cellStyle:自定义全局样式 * headerHeigth : 表头行数，用于渲染表头样式 * maxColumnLength：列宽上限 * header : 导出标题 * styles : 每行的样式 格式：{ '1': {style_1} , 'n': {style_n} } * */
前端经验：导出表格为excel并设置样式
最新发布
Comvir的专栏
06-03 452
将网页上的table标签内容导出为excel，并且导出的excel携带样式，比如字色、背景色、对齐等等。
基于Java+Vue养老院老人健康监护平台（源码+文档+包运行）
2401_84411433的博客
04-27 921
根据养老院老人健康监护管理的需求开发功能模块，实现对信息数据的添加、删除、修改、查询等基本操作，能够极大的提高养老院老人健康监护管理效率。通过本系统可以实现养老院老人健康监护管理的全过程，本系统主要的功能模块设计包括：用户管理，老人管理，食药记录管理，身体指标管理，体检病例管理，留言管理等。
vue使用js-xlsx、xlsx、xlsxStyle导出excel，可合并表格、修改格子样式，例如背景颜色、字体大小、列宽等
白~狼的博客
12-16 9262
vue导出excel，可修改样式：背景颜色、字体、列宽等
vue3前端excel导出；组件表格，自定义表格导出；Vue3 + xlsx + xlsx-style
MELANCHOLY ❤ ◁ ❚❚ ▷
02-20 2394
比如这种前端拼成的，又附带各种样式的表格（1）：合并单元格（2）：列宽（3）：背景色（4）：字体相关-大小粗细颜色字体等（5）：表格线，边框数据处理就不写了，数据处理为数组就可以了['左上表头','','','右上',''],['标题1','','','',''],['标题','测试合并','','',''],['固定标题','123','123','',''],['左下表头','','','右下',''],
vue前端导出Excel 并设置标题栏样式与导出样式
qq_44280090的博客
01-27 2045
vue利用Export2Excel.js做前端导出，实现导出样式自定义
vue使用xlsx-js-style导出excel表格、合并表格及设置样式
qq_40837982的博客
07-07 5059
【代码】vue使用xlsx-js-style导出excel表格、合并表格及设置样式。
vue导出excle单sheet文字居中表头加粗显示
YUE
06-25 1619
在需要导出excle的vue文件中导入依赖。在method中定义。
vue 前端一键导出excel文件并附带表格样式
伦伦的博客
07-31 1726
【代码】vue 前端一键导出excel文件并附带表格样式。
vue2前端导出excel,设置表头、表格样式
weixin_45856794的博客
09-06 1907
vue2前端导出excel,设置表头、表格样式
vue导出excel并修改表头样式
10-29
在Vue.js应用中导出Excel并修改表头样式...通过以上步骤，你可以实现Vue应用中导出带有自定义表头样式的Excel文件。在实际项目中，你可能还需要考虑错误处理、数据过滤和格式化等细节，以确保功能的完整性和用户体验。
vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）
01-07
之前使用的富文本编辑器是quill，但是项目新需求需要加表格，用过的小伙伴都知道…，最后换成了wangEditor，下面展示从编辑到展示的代码历程，支持粘贴表格，图片自定义上传等功能，支持 IE10+ 浏览器。 官网：...
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在IT行业中，前端开发是至关重要的一个领域，而Vue.js作为一个流行的前端框架，因其轻量级、易上手和强大的功能而备受开发者喜爱。Element UI则是一个基于Vue的UI组件库，提供了丰富的预设组件，使得开发者能够快速...
vue 导出excel,支持单元格合并,背景色,列宽,字体大小等
03-02
vue 导出excel,支持单元格合并,背景色,列宽,字体大小，一个js 文件就可以搞定
vue使用xlsx导出为Excel表格 自定义表格样式
wancaicai_的博客
12-28 824
创建js文件抛出方法。
前端导出Excel，修改字体样式以及居中等
qq_51925599的博客
04-10 2941
/ multiHeader.length = 0 时表头有合并单元格，表头只占2行A2-Z2，A3-Z3，这是没有描述信息只有表头合并的。// if (['date'].includes(englishKey)) { //转化日期格式。// 老版本(14) 是默认导出，所以直接用的是import XLSX from 'xlsx'"AJ", ///这里可根据自己表格的数据进行增加，这里主要是设置样式-filename: 'excel-list', // 文件名。'消耗': 'sum_cost'，
vue 前端导出Excel表格（含多级表头，表格样式）
Chase 学习专栏
12-22 764
开发中有类似需求，整理的他人经验，基于VUE项目，综合考虑使用；
vue导出excel文件表头加粗
05-11
你可以通过设置样式来使表头加粗。以下是一个示例代码： ```javascript <template> <div> <button @click="exportExcel">导出</button> </div> </template> <script> import { export_json_to_excel } from '@/utils/excel.js' export default { methods: { exportExcel() { const header = ['姓名', '年龄', '性别'] const data = [ ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'] ] const tHeader = header.map(item => { return { title: item, bold: true } }) const merges = [] const exportParams = { header: tHeader, data, merges } export_json_to_excel(exportParams) } } } </script> <style lang="scss"> .bold { font-weight: bold; } </style> ``` 注意，在上面的代码中，我们通过设置 `bold` 属性来指定表头是否加粗，然后在样式中设置加粗的样式。在 `excel.js` 文件中，你需要根据 `bold` 的值来设置表头样式。以下是一个示例代码： ```javascript function generateThead(theme, merges, header) { const C = [] const CLength = header.length for (let i = 0; i < CLength; ++i) { const item = header[i] const cell = getCell(i, 0) setCellStyle(cell, theme.cell) if (item.bold) { setCellStyle(cell, theme.bold) } setText(cell, item.title) C.push(cell) } return [C] } ``` 在上面的代码中，我们首先判断 `item.bold` 的值是否为真，如果是，则设置加粗的样式。你可以根据你自己的需要来设置其他的样式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值