位置: IT常识 - 正文

vue导出含有多个表的excel,并设置边框、背景色、字体、宽度等(vue实现导出)

编辑:rootadmin
vue导出含有多个表的excel,并设置边框、背景色、字体、宽度等

推荐整理分享vue导出含有多个表的excel,并设置边框、背景色、字体、宽度等(vue实现导出),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue实现导出,vue实现导出功能,vue实现导出功能,vue实现导出功能,vue导出数据到excel,vue实现导出,vue实现导出,vue导出数据到excel,内容如对您有帮助,希望把文章链接给更多的朋友!

前言:之前导出的excel都是一个excel中只有一个表格,在这次开发中,要实现的功能是一个项目中有三个表格,而且单元格还要设置不同的样式,遇到了很多问题,特意记录。

内容大纲如下:

目录

一、选择插件

二、创建工作簿对象

三、设置样式

1. 合并单元格

 2. 设置单元格公共样式

3.单元格设置边框

4.设置列宽

5.在单元格中设置斜线


一、选择插件

最开始,我们要根据是否需要自己设置样式选择好插件:

由于我们导出的是excel文件,所以要使用xlsx插件

npm i xlsx

 其次,要对单元格样式进行更改,所以这次使用的是xlsx-style 插件

npm i xlsx-style

准备就绪,将这两个插件引入到js文件中

import * as XLSX from 'xlsx'import XLSX2 from 'xlsx-style'二、创建工作簿对象

1. 创建一个工作簿对象:(table1和table2是表数据,是[['', '', ''], ['', '', ''], ['', '', '']]的格式)

var wb = XLSX.utils.book_new() // 工作簿对象包含一SheetNames数组,以及一个表对象映射表名称到表对象,XLSX.utils.book_new使用函数创建一个新的工作簿对象 var ws_name = 'SheetJS' // 给工作表命名 var workbook = XLSX.utils.aoa_to_sheet(table1) // 定义工作表,并在里边添加第一个表格 XLSX.utils.sheet_add_aoa(workbook, table2, { origin: 'B1' }) // 向工作表中追加一个表格,并设置从哪个单元格开始 XLSX.utils.book_append_sheet(wb, workbook, ws_name) // 合成工作簿,向工作簿中添加命名为wa_name的工作表

 这时,我们就可以生成基础的工作簿对象。

工作簿中的工作表对象,这个对象中每个不以!开头的属性,都代表一个单元格。

三、设置样式1. 合并单元格

工作表中的 !merges字段存储的是合并的单元格,我们可以自定义要合并的单元格,并把它放进去。

// 定义要合并的单元格var merges = [ 'A20:E21', 'A1:A3', 'B1:R3', 'S1:V3', 'A4:V4', 'A5:E5', 'A13:E13', 'G5:H5', 'G6:G9', 'G10:G13', 'G14:G17', 'G18:G21', 'A6:A7', 'B6:B7', 'C6:D7', 'V6:V7', 'H6:H7', 'I6:I7', 'J6:J7', 'K6:K7', 'L6:L7']// 将要合并的单元格放进工作表中if (merges.length > 0) { if (!workbook['!merges']) workbook['!merges'] = [] merges.forEach(item => { workbook['!merges'].push(XLSX.utils.decode_range(item)) }) } 2. 设置单元格公共样式

单元格的样式都存储在workbook[key].s中,我们可以在设置完公共样式后单独再设置某些单元格的样式。

let borderAll = { // 单元格外侧框线 top: { style: 'thin', color: { rgb: '000000' } }, bottom: { style: 'thin', color: { rgb: '000000' } }, left: { style: 'thin', color: { rgb: '000000' } }, right: { style: 'thin', color: { rgb: '000000' } } }// 设置公共样式if (workbook[key] instanceof Object) { workbook[key].s = { border: borderAll, // 边框样式设置 alignment: { // 文字样式设置 horizontal: 'center', // 字体水平居中 vertical: 'center', // 垂直居中 wrapText: 1 // 自动换行 }, fill: { //背景色 fgColor: { rgb: 'C0C0C0' } }, font: { // 单元格中字体的样式与颜色设置 sz: 10, color: { rgb: '000000' }, bold: false }, bold: true, numFmt: 0 } }3.单元格设置边框

给某个单元格设置边框

if (key === 'A1') { workbook[key].s.border = { top: { style: 'thin', color: { rgb: 'FFFFFF' } }, bottom: { style: 'double', color: { rgb: '3E87C8' } }, left: { style: 'thin', color: { rgb: 'FFFFFF' } }, right: { style: 'thin', color: { rgb: 'FFFFFF' } } } }

边框的样式:

thin

vue导出含有多个表的excel,并设置边框、背景色、字体、宽度等(vue实现导出)

medium

 

thick

dotted

  hair

  dashed

  mediumDashed

dashDot

mediumDashDot

dashDotDot 

mediumDashDotDot

 

slantDashDot

double

 

4.设置列宽

单元格的列宽用的是  !cols  属性,列的顺序是从左向右,从0开始

if (!workbook['!cols']) workbook['!cols'] = [] for (var i = 0; i <= 21; i++) { if (i === 0 || i === 1 || i === 4 || i === 7) { workbook['!cols'][i] = { wpx: 60 } } else if (i === 2 || i === 3) { workbook['!cols'][i] = { wpx: 25 } } else { workbook['!cols'][i] = { wpx: 50 } } }5.在单元格中设置斜线

斜线的方向与斜线的样式必须同时使用,不然没有效果

斜线方向:

diagonalDown:对角线向下方向 diagonalUp: 对角线向上方向

if (key === 'A6') { workbook[key].s.border = { top: { style: 'thin', color: { rgb: '000000' } }, bottom: { style: 'thin', color: { rgb: '000000' } }, left: { style: 'thin', color: { rgb: '000000' } }, right: { style: 'thin', color: { rgb: '000000' } }, diagonalDown: true, // 斜线方向 diagonal: { // 斜线样式 color: { rgb: '000000' }, style: 'thin' } } }
本文链接地址:https://www.jiuchutong.com/zhishi/283659.html 转载请保留说明!

上一篇:电竞显示器怎么选?小编教你如何挑选专业电竞(电竞显示器怎么调整参数)

下一篇:解决Cannot read properties of undefined (reading ‘resetFields‘)(解决中暑最有效方法)

  • 华为nova9卡槽在哪里(华为nova9卡槽在哪里图片)

    华为nova9卡槽在哪里(华为nova9卡槽在哪里图片)

  • 荣耀X30Max是高刷吗(荣耀x30屏幕刷新率)

    荣耀X30Max是高刷吗(荣耀x30屏幕刷新率)

  • 荣耀x10摄像头如何升起来(华为荣耀x10手机摄像头)

    荣耀x10摄像头如何升起来(华为荣耀x10手机摄像头)

  • vivos7和vivox50的区别(vivos7和vivox50价格相差有些大呢)

    vivos7和vivox50的区别(vivos7和vivox50价格相差有些大呢)

  • magic系统和emui区别(magic系统和emui系统哪个好)

    magic系统和emui区别(magic系统和emui系统哪个好)

  • 华为拍照要不要开ai

    华为拍照要不要开ai

  • 微信应用分身无法登录(微信应用分身无法使用相册)

    微信应用分身无法登录(微信应用分身无法使用相册)

  • 快手1w怎么看全部粉丝(快手在哪里能看到挣多钱)

    快手1w怎么看全部粉丝(快手在哪里能看到挣多钱)

  • 华为如何修改安装未知应用权限(华为如何修改安装未知权限)

    华为如何修改安装未知应用权限(华为如何修改安装未知权限)

  • 电脑应用程序发生异常怎么处理(电脑应用程序发生异常,未知的软件异常)

    电脑应用程序发生异常怎么处理(电脑应用程序发生异常,未知的软件异常)

  • qq空间的照片模糊了怎么恢复(qq空间的照片模糊了怎么恢复清晰)

    qq空间的照片模糊了怎么恢复(qq空间的照片模糊了怎么恢复清晰)

  • 手机qq群课堂怎么显示自己的屏幕(手机qq群课堂怎么看自己开没开麦)

    手机qq群课堂怎么显示自己的屏幕(手机qq群课堂怎么看自己开没开麦)

  • 华为怎么触发单手模式(华为怎么触发单手模式手势)

    华为怎么触发单手模式(华为怎么触发单手模式手势)

  • bat是什么文件扩展名(bat属于什么文件)

    bat是什么文件扩展名(bat属于什么文件)

  • 最早的计算机是用来干什么的(最早的计算机是集成电路计算机吗)

    最早的计算机是用来干什么的(最早的计算机是集成电路计算机吗)

  • 苹果6s内存不够怎么办(苹果6s内存不够可以改内存吗)

    苹果6s内存不够怎么办(苹果6s内存不够可以改内存吗)

  • 换数据线会影响闪充吗(换数据线会影响快充吗)

    换数据线会影响闪充吗(换数据线会影响快充吗)

  • 华为平板m5支持otg吗(华为平板m5支持扩展内存吗)

    华为平板m5支持otg吗(华为平板m5支持扩展内存吗)

  • 苹果手机可能不支持此配件是什么意思(苹果手机可能不支持此配件怎么解决)

    苹果手机可能不支持此配件是什么意思(苹果手机可能不支持此配件怎么解决)

  • 拼单不成功多久会退款(要是拼单不成功他会退钱吗)

    拼单不成功多久会退款(要是拼单不成功他会退钱吗)

  • 手机vue字体怎么变大(vue字体怎么变颜色)

    手机vue字体怎么变大(vue字体怎么变颜色)

  • 抖音怎么切换几个画面(抖音怎么切换几个号登录)

    抖音怎么切换几个画面(抖音怎么切换几个号登录)

  • ie浏览器如何截屏(ie浏览器网页怎么截图全部截到)

    ie浏览器如何截屏(ie浏览器网页怎么截图全部截到)

  • 怎么让港版x支持电信(港版怎么用支付宝支付)

    怎么让港版x支持电信(港版怎么用支付宝支付)

  • 电脑点不亮原因及处理方法(电脑点不亮什么毛病)

    电脑点不亮原因及处理方法(电脑点不亮什么毛病)

  • 隐形音响的弊端(隐形音响的弊端分析)

    隐形音响的弊端(隐形音响的弊端分析)

  • 去掉开机显示BIOS里的英文内容要一分多钟时间的方法(电脑开机显示怎么取消?)

    去掉开机显示BIOS里的英文内容要一分多钟时间的方法(电脑开机显示怎么取消?)

  • 复制快捷键ctrl加什么介绍(复制快捷键ctrl+c)

    复制快捷键ctrl加什么介绍(复制快捷键ctrl+c)

  • 车船税计入管理费用什么明细
  • 印花税是用来干吗的
  • 征地费用应计入什么会计科目
  • 过路费纸质发票怎么生成电子发票
  • 销售咨询费一般涉及哪些业务
  • 工资算管理费用还是生产成本
  • 税控设备抵减增值税会计处理
  • 赠送的商品怎么缴纳增值税
  • 外商投资企业合并
  • 小规模增值税做那个费用科目
  • 小规模纳税人进项发票怎么做账
  • 实际收到股票股利的分录
  • 建筑安装工程怎么缴税
  • 收到费用发票入账后发现错误
  • 少数股东权益如何保障
  • 冲销暂估入库
  • 境外保险是什么意思
  • 先开票后预缴能跨年吗
  • 合同印花税进哪个科目
  • 资产负债表属于会计报表吗
  • 汇总纳税企业的分公司如何享受税收优惠政策
  • 农副产品免税怎么报税
  • 海外佣金税务怎么缴纳
  • 零售金银首饰消费税税率是多少
  • 虚拟机安装苹果系统全过程
  • 存出投资款是什么凭证
  • 信用证保证金会退还吗
  • 域名服务费属于什么会计科目
  • 出库单可以补吗
  • 承租集体土地如何确权
  • linux怎么启动.sh文件
  • 公允价值变动损益会计处理
  • 月末结转本年利润怎么算
  • 补缴当年增值税和滞纳金如何入账
  • 在建工程减值准备核销
  • 免征的增值税如何处理
  • 汽车运输企业的实际成本计算单位是
  • framework启动
  • 股东无偿投入的土地需要摊销吗
  • 未取得合法凭证税前扣除
  • phpwhile循环多维数组
  • javatoken生成机制
  • laravel sqlserver
  • html入门基础
  • javaweb界面设计
  • 前端项目和后端项目
  • admit允许
  • 员工买机票公司会知道吗
  • 土地增值税成本费用
  • 发给客户的服装文案
  • 劳保统筹费计入什么科目
  • 未确认融资费用怎么算
  • 在建工程领用自产应税消费品
  • 公允价值变动是一级科目吗
  • 研发费用加计扣除的条件
  • 医院哪些地方需要有明显的禁烟标识
  • 投资性房地产转换计入其他综合收益
  • 应付账款周转率越大越好还是越小越好?
  • 解除劳动合同的合法程序
  • 写字楼物业费按照什么面积
  • 营业外支出罚没支出包括
  • 建筑升降机厂家
  • 企业租用农村土地
  • 研发费用如何做分录分析
  • 新成立的公司需要年检吗
  • linux多线程并发的处理方式
  • mac如何恢复到出厂系统版本
  • windows无法启动,可能原因
  • w7打穿越火线
  • centos进入指定目录
  • linux服务器常用操作命令
  • shell脚本实现同时多台远程主机执行命令的代码分享
  • 同一个文件夹中的文件可以同名吗
  • php监控源码
  • 编写高质量代码改善JAVA程序的151个建议
  • &&在js中
  • python数字类型及操作
  • javascript面向对象编程指南
  • 详解js跨域原理是什么
  • 数码产品关税多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设