位置: 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‘)(解决中暑最有效方法)

  • 微信浮窗功能怎么关闭(微信浮窗功能怎么没有了)

    微信浮窗功能怎么关闭(微信浮窗功能怎么没有了)

  • 台积电算是中国企业吗(台积电是中国的还是外国的)

    台积电算是中国企业吗(台积电是中国的还是外国的)

  • 抖音怎么链接淘宝店铺(抖音怎么连接淘宝链接)

    抖音怎么链接淘宝店铺(抖音怎么连接淘宝链接)

  • 已经交易成功怎么退款(交易成功还能退吗)

    已经交易成功怎么退款(交易成功还能退吗)

  • 华为nova7se怎么录屏(华为nova7se怎么设置返回键)

    华为nova7se怎么录屏(华为nova7se怎么设置返回键)

  • 拼多多拼小圈怎么关闭(拼多多拼小圈怎么关闭不让别人看)

    拼多多拼小圈怎么关闭(拼多多拼小圈怎么关闭不让别人看)

  • 淘宝订单多久自动确认收货(淘宝订单多久自动付款)

    淘宝订单多久自动确认收货(淘宝订单多久自动付款)

  • qq等级三个皇冠之后(qq等级三个皇冠,三个太阳,三个月亮,三颗星。图标)

    qq等级三个皇冠之后(qq等级三个皇冠,三个太阳,三个月亮,三颗星。图标)

  • 己连接但无法访问互联网怎么办(己连接但无法访问互联网是手机坏了吗)

    己连接但无法访问互联网怎么办(己连接但无法访问互联网是手机坏了吗)

  • 汇编语言是一种什么程序设计语言(汇编语言是一种符号化的机器语言)

    汇编语言是一种什么程序设计语言(汇编语言是一种符号化的机器语言)

  • 怎么限制手机安装软件(怎么限制手机安装拼多多)

    怎么限制手机安装软件(怎么限制手机安装拼多多)

  • 拼多多省钱月卡怎么退(拼多多省钱月卡刚开了怎么退)

    拼多多省钱月卡怎么退(拼多多省钱月卡刚开了怎么退)

  • 滴滴怎么举报(滴滴平台举报司机)

    滴滴怎么举报(滴滴平台举报司机)

  • kindle32g有必要吗(kindle32g还是8g)

    kindle32g有必要吗(kindle32g还是8g)

  • 云闪付红包怎么用(云闪付红包怎么提现到银行卡)

    云闪付红包怎么用(云闪付红包怎么提现到银行卡)

  • 计算机三级嵌入式知识点(计算机三级嵌入式题库)

    计算机三级嵌入式知识点(计算机三级嵌入式题库)

  • wlan信号桥是(wlan信号桥是干什么用的)

    wlan信号桥是(wlan信号桥是干什么用的)

  • 怎么在美团上购买电影票(怎么在美团上购买香烟)

    怎么在美团上购买电影票(怎么在美团上购买香烟)

  • 如何把下载的视频存到相册(如何把下载的视频保存到百度网盘)

    如何把下载的视频存到相册(如何把下载的视频保存到百度网盘)

  • WebRTC实现rtsp流在浏览器中播放(rtp webrtc)

    WebRTC实现rtsp流在浏览器中播放(rtp webrtc)

  • 海带软件分享——Office 2021全家桶安装教程(附报错解决方法)(海带下载)

    海带软件分享——Office 2021全家桶安装教程(附报错解决方法)(海带下载)

  • 力拓河中含矿物质的水,西班牙里奥廷托矿区 (© David Santiago Garcia/Getty Images)(全球矿业巨头力拓集团)

    力拓河中含矿物质的水,西班牙里奥廷托矿区 (© David Santiago Garcia/Getty Images)(全球矿业巨头力拓集团)

  • 捐赠支出纳税调减
  • 个体工商户怎么申请开普票
  • 开增值税发票规格是否可以不用填
  • 其他应付款不用付了会计分录
  • 应付账款超过三年未付
  • 高速公路通行费发票可以抵扣增值税吗
  • 对赌协议补偿款计入哪个科目
  • 承兑差额怎么做账
  • 对公账户100万交多少税收
  • 注册资本金印花税减半征收
  • 2017年事业单位b类真题及答案
  • 小规模纳税人如何转一般纳税人
  • 转正工资差额什么意思
  • 研发支出的二级科目是什么
  • 启用或关闭windows功能怎么勾选
  • 未开票收入跨年度如何申报冲回
  • 收入成本配比原则
  • 员工伙食费明细表
  • 摊余成本计入哪个科目
  • 归还银行借款摘要模板
  • 企业的各项费用
  • 如何计提加计抵减额分录
  • 加工劳务费会计分录
  • 100行php代码实现加密端口转发
  • 办公用品属于会计科目中的什么
  • vue面试题简书
  • Midjourney之外21款免费的AI Image画图网站集合
  • SpringBoot+Vue实现在线商城系统
  • yii2框架从入门到精通
  • iozone测试结果分析
  • 物流企业会计核算的具体内容包括
  • 行政事业单位怎么开发票
  • 公益性捐赠递延注会
  • java查询mongodb数据
  • 代扣代缴增值税附加税减免政策
  • 农副产品免税了还需要缴纳个人所得税吗
  • 应发工资包含
  • 已经认证尚未抵扣的发票
  • 用库存现金支付职工医药费用69元,会计人员
  • 工业企业成本一般占收入的比例
  • 小规模纳税人转一般纳税人的条件
  • 红冲凭证怎么做分录
  • 出口收入没有及时申报怎么处罚
  • 专利权摊销如何计算
  • 代扣代缴附加税怎么做账
  • 增值税免抵退税和免退税的区别有什么?
  • 设计费要计入固定成本吗
  • 施工企业项目部管理人员对外行为的法律后果由谁承担
  • 化肥贸易行业
  • 预计负债 负债 区别
  • 采购未取得发票怎么结转成本
  • 锅炉设备销售
  • 企业股东的出资方式
  • freebsd配置dns
  • windows无法打开此文件
  • 苹果电脑mac系统键盘无法找到
  • yosemite 10.10.5升级
  • linux系统了解
  • raid主要使用三种技术
  • s24evmon.exe - s24evmon是什么进程 有什么用
  • debian与centos详细对比区别
  • windows mobile应用
  • win7怎么取消锁定
  • windows7打不了字怎么办
  • cocos2d schedule
  • cocos2dx 3.17
  • 在dos中文件是以什么目录结构
  • android应用结构包括哪些
  • android设计模式的应用场景
  • python socket server
  • unity androidx
  • javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
  • java 视频教程
  • javascriptjs
  • Python运行报错此段代码无法访问
  • 宁波镇海哪里可以赶海
  • 国家税务总局官网电子税务局
  • 上海中考规定
  • 个人所得税全年不到60000,单月超过
  • 重庆市低保查询电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设