前端使用XLSX导出文件，涉及到合并、字体、边框等

最新推荐文章于 2024-09-27 10:42:36 发布
最新推荐文章于 2024-09-27 10:42:36 发布
阅读量392 收藏
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56995244/article/details/141933939
版权

vue

首先安装依赖

  npm install xlsx-js-style

页面引用

  import * as XLSX from 'xlsx-js-style'

表格数据dataList，我前端显示时也需要合并，有两个合并条件于是建立了两个属性sfRowSpan、userRowSpan，表示合并的行数，最后两行也有横着的合并项，所以column如下面所示

例如第1、2行需要合并，第一行数据的rowSpan为2，第二行的rowSpan为0...

columns: [
          {
            title: '省份',
            dataIndex: 'province',
            align: 'center',
            width: 100,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (row.sfRowSpan && row.sfRowSpan !== 0) {
                obj.attrs.rowSpan = row.sfRowSpan
              } else if (row.sfRowSpan == 0) {
                obj.attrs.rowSpan = 0
              } else {
                obj.attrs.rowSpan = 1
              }
              if (index >= this.dataList.length - 2) {
                obj.attrs.colSpan = row.lastColSpanOne
              }
              return obj
            }
          },
          {
            title: '地区',
            dataIndex: 'district',
            align: 'center',
            width: 100,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (index >= this.dataList.length - 2) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
            title: '联系人',
            dataIndex: 'personInCharge',
            align: 'center',
            width: 100,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (index >= this.dataList.length - 2) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
            title: '业务员',
            dataIndex: 'salesman',
            align: 'center',
            width: 100,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (row.userRowSpan && row.userRowSpan !== 0) {
                obj.attrs.rowSpan = row.userRowSpan
              } else if (row.userRowSpan == 0) {
                obj.attrs.rowSpan = 0
              } else {
                obj.attrs.rowSpan = 1
              }
              if (index >= this.dataList.length - 2) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
            title: '单号',
            dataIndex: 'salOrderNo',
            align: 'center',
            width: 150,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (index >= this.dataList.length - 2) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
            title: '名称',
            dataIndex: 'name',
            align: 'center',
            width: 150,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (index >= this.dataList.length - 2) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
            title: '数量',
            dataIndex: 'count',
            align: 'center',
            width: 80,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (index >= this.dataList.length - 1) {
                obj.attrs.colSpan = row.lastColSpanTwo
              }
              return obj
            }
          },
          {
            title: '单位',
            dataIndex: 'unit',
            align: 'center',
            width: 80,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (index >= this.dataList.length - 1) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
            title: '退货',
            dataIndex: 'returnSales',
            align: 'center',
            width: 80,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (row.sfRowSpan && row.sfRowSpan !== 0) {
                obj.attrs.rowSpan = row.sfRowSpan
              } else if (row.sfRowSpan == 0) {
                obj.attrs.rowSpan = 0
              } else {
                obj.attrs.rowSpan = 1
              }
              if (index >= this.dataList.length - 1) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
            title: '销量',
            dataIndex: 'total',
            align: 'center',
            width: 80,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (row.sfRowSpan && row.sfRowSpan !== 0) {
                obj.attrs.rowSpan = row.sfRowSpan
              } else if (row.sfRowSpan == 0) {
                obj.attrs.rowSpan = 0
              } else {
                obj.attrs.rowSpan = 1
              }
              if (index >= this.dataList.length - 1) {
                obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
            title: '区域销量',
            dataIndex: 'areaTotal',
            align: 'center',
            width: 100,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (row.userRowSpan && row.userRowSpan !== 0) {
                obj.attrs.rowSpan = row.userRowSpan
              } else if (row.userRowSpan == 0) {
                obj.attrs.rowSpan = 0
              } else {
                obj.attrs.rowSpan = 1
              }
              return obj
            }
          },
          {
            title: '计划',
            dataIndex: 'areaPlanTotal',
            align: 'center',
            width: 80,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (row.userRowSpan && row.userRowSpan !== 0) {
                obj.attrs.rowSpan = row.userRowSpan
              } else if (row.userRowSpan == 0) {
                obj.attrs.rowSpan = 0
              } else {
                obj.attrs.rowSpan = 1
              }
              return obj
            }
          },
          {
            title: '完成率',
            dataIndex: 'finishingRate',
            align: 'center',
            width: 90,
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {}
              }
              if (row.userRowSpan && row.userRowSpan !== 0) {
                obj.attrs.rowSpan = row.userRowSpan
              } else if (row.userRowSpan == 0) {
                obj.attrs.rowSpan = 0
              } else {
                obj.attrs.rowSpan = 1
              }
              return obj
            }
          }
        ]

浏览器显示效果

导出方法

导出excel同浏览器显示效果要一样

所以可以根据我之前数据内的rowSpan、colSpan找到合并的具体位置与数量

可以生成多个sheet


      downLoadXlsx () {
        if (this.dataList.length == 0) {
          this.$notification.info({message: '不能导出空的数据'})
          return
        }
        this.loading = true
        // 创建工作簿
        const wb = XLSX.utils.book_new()
        // 列头 字符串数组
        const title = this.getTitle(this.columns)
        // 数据 字符串数组 数据不能为null 为null时表格边框样式不生效
        const data = this.getData(this.dataList, this.columns)
        // 标题 文件名
        const point = moment(this.param.endDate).format('YYYY年MM月') + '区域完成情况'
        // 创建工作表
        const ws = XLSX.utils.aoa_to_sheet([[point], title, ...data])
        // 取出当前excel范围 {e:{c: 34,r: 2},s:{c: 0, r: 0}} 表示从0,0开始 34,2结束  34列
        const range = XLSX.utils.decode_range(ws['!ref'])
        // !merges 合并  !cols 列宽度 [{wpx: 100}, ...]
        // 合并第一行
        ws['!merges'] = [
          {s: {r: range.s.r,c: range.s.c}, e: {r: range.s.r,c: range.e.c}}
        ] 
        // 设置表格宽度
        ws['!cols'] = []
        // 按下标来的第一列第二列...
        this.columns.forEach(item => {
          ws['!cols'].push({
            wpx: item.width
          })
        })
        // 根据数据集内的rowSpan合并
        for (let i = 0; i < this.dataList.length; i++) {
          const iLine = this.dataList[i]
          if (i < this.dataList.length - 2) {
            if (iLine.sfRowSpan > 1) {
              // 省份合并
              // 固定规则 当前合并的初始行为2——下标  所以应+2 当前c(列)为0， r应为i+2 结束应为 c=0，r为i+2+rowspan
              ws['!merges'].push({
                s: {r: i + 2, c: 0}, //开始合并位置
                e: {r: i + 2 + iLine.sfRowSpan - 1,c: 0} // 结束合并位置
              })
              // 合并退货  退货第8列 (下标)
              ws['!merges'].push({
                s: {r: i + 2, c: 8}, //开始合并位置
                e: {r: i + 2 + iLine.sfRowSpan - 1,c: 8} // 结束合并位置
              })
              // 合并销量  销量第9列 (下标)
              ws['!merges'].push({
                s: {r: i + 2, c: 9}, //开始合并位置
                e: {r: i + 2 + iLine.sfRowSpan - 1,c: 9} // 结束合并位置
              })
            }
            if (iLine.userRowSpan > 0) {
              // 合并业务员  业务员第3列 (下标)
              ws['!merges'].push({
                s: {r: i + 2, c: 3}, //开始合并位置
                e: {r: i + 2 + iLine.userRowSpan - 1,c: 3} // 结束合并位置
              })
              // 合并区域销量  区域销量第10列 (下标)
              ws['!merges'].push({
                s: {r: i + 2, c: 10}, //开始合并位置
                e: {r: i + 2 + iLine.userRowSpan - 1,c: 10} // 结束合并位置
              })
              // 合并计划 计划第11列 (下标)
              ws['!merges'].push({
                s: {r: i + 2, c: 11}, //开始合并位置
                e: {r: i + 2 + iLine.userRowSpan - 1,c: 11} // 结束合并位置
              })
              // 合并完成率  完成率第12列 (下标)
              ws['!merges'].push({
                s: {r: i + 2, c: 12}, //开始合并位置
                e: {r: i + 2 + iLine.userRowSpan - 1,c: 12} // 结束合并位置
              })
            }
          } else {
            ws['!merges'].push({
              s: {r: i + 2, c: 0}, //开始合并位置
              e: {r: i + 2, c: iLine.lastColSpanOne - 1 } // 结束合并位置
            })
            if (i == this.dataList.length - 1) {
              ws['!merges'].push({
                s: {r: i + 2, c: 6}, //开始合并位置
                e: {r: i + 2, c: 6 + iLine.lastColSpanTwo - 1} // 结束合并位置
              })
            }
          }
        }
        // 设置边框 字体
        for (let r = range.s.r;r <= range.e.r; r++) {
          for (let c = range.s.c;c <= range.e.c; c++) {
            const ex = XLSX.utils.encode_cell({r: r, c: c})
            if (!ws[ex]) {
              ws[ex] = {}
            }
            // 第一二行字体加粗
            if (r === 0 || r === 1) {
              ws[ex].s = {
                border: {
                  top: { style: 'thin', color: '#000000' },
                  bottom: { style: 'thin', color: '#000000' },
                  left: { style: 'thin', color: '#000000' },
                  right: { style: 'thin', color: '#000000' }
                },
                alignment: {
                  vertical: 'center', // 垂直居中
                  horizontal: 'center' // 水平居中
                },
                font: {
                  bold: true
                }
              }
            } else {
              ws[ex].s = {
                border: {
                  top: { style: 'thin', color: '#000000' },
                  bottom: { style: 'thin', color: '#000000' },
                  left: { style: 'thin', color: '#000000' },
                  right: { style: 'thin', color: '#000000' }
                },
                alignment: {
                  vertical: 'center', // 垂直居中
                  horizontal: 'center' // 水平居中
                }
              }
            }
          }
        }
        // 添加工作表到工作簿
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

        // 第二个页签数据
        
        // 列头
        const titleL = this.getTitle(this.leftColumns)
        // 数据
        const dataL = this.getData(this.leftData, this.leftColumns)
        // 创建工作表
        const wsL = XLSX.utils.aoa_to_sheet([titleL, ...dataL])
        // 取出当前excel范围
        const rangeL = XLSX.utils.decode_range(wsL['!ref'])
        // 设置字体及边框
        for (let r = rangeL.s.r;r <= rangeL.e.r; r++) {
          for (let c = rangeL.s.c;c <= rangeL.e.c; c++) {
            const ex = XLSX.utils.encode_cell({r: r, c: c})
            if (!wsL[ex]) {
              wsL[ex] = {}
            }
            if (r === 0) {
              wsL[ex].s = {
                border: {
                  top: { style: 'thin', color: '#000000' },
                  bottom: { style: 'thin', color: '#000000' },
                  left: { style: 'thin', color: '#000000' },
                  right: { style: 'thin', color: '#000000' }
                },
                alignment: {
                  vertical: 'center', // 垂直居中
                  horizontal: 'center' // 水平居中
                },
                font: {
                  bold: true
                }
              }
            } else {
              wsL[ex].s = {
                border: {
                  top: { style: 'thin', color: '#000000' },
                  bottom: { style: 'thin', color: '#000000' },
                  left: { style: 'thin', color: '#000000' },
                  right: { style: 'thin', color: '#000000' }
                },
                alignment: {
                  vertical: 'center', // 垂直居中
                  horizontal: 'center' // 水平居中
                }
              }
            }
          }
        }
        // 添加工作表到工作簿
        XLSX.utils.book_append_sheet(wb, wsL, 'Sheet2')

        // 第三个页签数据
        
        // 列头
        const titleR = this.getTitle(this.rightColumns)
        // 数据
        const dataR = this.getData(this.rightData, this.rightColumns)
        // 创建工作表
        const wsR = XLSX.utils.aoa_to_sheet([titleR, ...dataR])
        // 取出当前excel范围
        const rangeR = XLSX.utils.decode_range(wsR['!ref'])
        // 设置字体及边框
        for (let r = rangeR.s.r;r <= rangeR.e.r; r++) {
          for (let c = rangeR.s.c;c <= rangeR.e.c; c++) {
            const ex = XLSX.utils.encode_cell({r: r, c: c})
            if (!wsR[ex]) {
              wsR[ex] = {}
            }
            if (r === 0) {
              wsR[ex].s = {
                border: {
                  top: { style: 'thin', color: '#000000' },
                  bottom: { style: 'thin', color: '#000000' },
                  left: { style: 'thin', color: '#000000' },
                  right: { style: 'thin', color: '#000000' }
                },
                alignment: {
                  vertical: 'center', // 垂直居中
                  horizontal: 'center' // 水平居中
                },
                font: {
                  bold: true
                }
              }
            } else {
              wsR[ex].s = {
                border: {
                  top: { style: 'thin', color: '#000000' },
                  bottom: { style: 'thin', color: '#000000' },
                  left: { style: 'thin', color: '#000000' },
                  right: { style: 'thin', color: '#000000' }
                },
                alignment: {
                  vertical: 'center', // 垂直居中
                  horizontal: 'center' // 水平居中
                }
              }
            }
          }
        }
        // 添加工作表到工作簿
        XLSX.utils.book_append_sheet(wb, wsR, 'Sheet3')

        // 生成Excel文件
        XLSX.writeFile(wb, point + '.xlsx')
  
        this.loading = false
      },
      getTitle (columns) {
        const title = []
        columns.forEach(item => {
          title.push(item.title)
        })
        return title
      },
      getData (dataList, columns) {
        const data = []
        for (let i = 0; i < dataList.length; i++) {
          if (!data[i]) {
            data[i] = []
          }
          for (const col of columns) {
            data[i].push(dataList[i][col.dataIndex])
          }
        }
        return data
      }

导出效果

DX_release
关注
vue3+ts+xlsx、xlsx-populate页面上显示表格并导出excel
Missxu1895的博客
06-03 233
要用到的就是xlsx-populate，用它生成和页面上显示的一样的样式并且导出。以上代码就是如何在页面上展示的表格，接下来要说的就是如何导出excel表格，且导出的excel表格内容与页面上一致。以及如何导出pdf格式的内容。页面上需要显示一个数据的excel表格，样式为固定左侧两列和表头（如下图所示），导出的时候结构也要和页面上是一致的。3.数据拿到了以后要处理一下，把拿到的表头数据添加到tableData中，便于td遍历。以上就是小编要分享的关于xlsx进行导出展示的内容啦～2.如何导出pdf格式。
javascript xlsx导入 合并的单元格数据
weixin_40981437的博客
07-17 263
JavaScript中导入并处理XLSX文件中的合并单元格数据 作为一名经验丰富的开发者，我很高兴能帮助你解决JavaScript中导入XLSX文件并处理其中的合并单元格数据的问题。下面，我将为你详细解释整个流程，并提供相应的代码示例。 流程概述 首先，我们通过以下步骤来实现这一功能： 导入XLSX文件：使用FileRe...
vue使用xlsx模块导出EXCEL且给合并单元格添加边框
qq_37028216的博客
02-20 9870
准备 后台系统开发中，统一功能经常遇到需要将统计的数据以EXCEL的形式导出。针对这个需求，我遍在网上搜寻相应的解决方案。最终选择了大多数的建议： 使用js-xlsx插件(https://www.npmjs.com/package/xlsx)。 js-xlsx在npm中需要使用npm install xlsx进行安装，安装后还需要配合模块file-saver，以及对Blob对象处理的一个工具...
前端使用xlsx-js-style导出Excel，带样式，并处理合并单元格边框显示不全和动态插入表头解决
ccyyss的专栏
09-27 1169
前端纯js导出Excel，带样式和合并单元边框
带合并行、分组表头和分组表格导出excel
weixin_40992252的博客
04-02 1103
注意：表格要使用包起来，后面导出使用。未合并之前把数据处理成这样展示即可，根据后端返回的json自行处理。先要把json数据处理成一行一行的表格数据，然后再做合并行。在index.html中引入。
前端实现excel导出表格(纯前端实现)
liang04273的博客
01-06 2929
vue中前端自己实现excel导出表格。实现是给表格绑定一个id，通过获取dom来导出。
使用ExcelJs导出表格设置样式、添加边框
m0_66970189的博客
10-17 5598
xlsx、xlsxStyle和fileSaver一起使用也可以导出表格，并且设置表格样式，但是就目前来看，ExcelJs安装后可以直接使用，不用去解决依赖包的报错问题，还是不错的。另外，使用ExcelJs还可以参考这篇文章ExcelJS 使用帮助文档。
JS导出合并行数据excel(js-xlsx)
Benxiaohai_311的博客
08-10 3722
需求：能够根据后端给的数据，导出excel，并且相同车辆合并单元格。
xlsx-style实现表格下载
12-17
总的来说，`xlsx-style`是前端开发中实现带样式Excel导出的强大工具，它简化了样式设置、行宽调整、合并单元格和表头区分等操作，且能有效处理大数据量，极大地提升了用户体验。在实际项目中，熟练掌握和运用`xlsx-...
js生成excel样式文件xlsx.full.min.js
08-09
对于样式部分，`xlsx-style`模块提供了对Excel单元格样式的支持，包括字体、颜色、边框、填充、对齐方式等。例如，你可以设置单元格的字体大小、颜色，甚至添加背景色或边框。以下是一些基本样式设置的例子： ```...
vue导出excel表格，自定义字体样式，字体颜色，合并单元格，单元格填充色-xlsx以及xlsx-style，JSZip为2.XX版本
qq_39738977的博客
11-06 8193
先装包 安装注意 import XLSX from "xlsx-style"报错：This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js 需要修改源码： 在\node_modules\xlsx-style\dist\cpexcel.js ...
基于SheetJS以及XLSXStyle的纯前端带样式导出表格为Excel的工具包
08-12
然而，SheetJS默认并不支持样式操作，这使得生成的Excel文件可能缺乏必要的格式化，例如颜色、字体、边框等。为了弥补这一不足，XLSX-Style应运而生。XLSX-Style是SheetJS的一个扩展，专门用于在前端实现带样式的...
Javascript导出Excel，自动合并单元格、自动列宽、有进度条
06-28
js导出execl，自动合并单元格，自动增行，增列
vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽（使用xlsx库和xlsx-style库）
热门推荐
个人博客
05-09 1万+
xlsx是由SheetJS开发的一个处理excel文件的npm库适用于前端开发者实现导入导出excel文件的经典需求为了区别于xlsx文件，突出其应用语言，该库通常又被称为js-xlsx。
vue：功能【xlsx】动态行内合并
1363648943的专栏
03-14 2866
在代码中，使用了一个名为 sheet1 的对象来定义表格的名称、数据、合并单元格和行高等信息。4、最后，通过调用 OutExcelSheet.exportSheetExcel 函数，并传递以上参数，将生成的 Excel 文件导出到本地。注）生成的excel封装的方法如下（支持表头合并、导出的 excel 支持生成多个sheet工作表、表格可自适应宽度、自适应高度、合并表格）2、前端代码，导出，用的mock数据，是转换后的二维数组，封装的方法中有写。场景：纯前端导出excel数据，涉及到列合并、行合并。
vue导出表格。多规格商品名称合并单元格
m0_59203969的博客
12-20 713
vue导出多规格商品表格
使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号
m0_67372185的博客
06-06 2801
使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号
js自动合并值重复的单元格
jjjy00的专栏
12-15 505
function uniteTable(tableId,colLength) { //colLength-- 需要合并单元格的列1开始        var tb=document.getElementById(tableId);        tb.style.display='';         var i = 0;         var j = 0;         var
如何在前端使用JavaScript或相关库从服务器下载xlsx模板并自定义边框样式？
最新发布
10-26
在前端使用JavaScript下载xlsx模板通常涉及两个步骤：首先从服务器获取文件，然后使用相关的库如`xlsx`处理Excel数据以及`js-xlsx`来生成XLSX文件。对于自定义边框样式，我们需要在创建工作表时指定单元格的格式。 以下是基本的步骤： 1. **安装必要的库**： - 安装`axios`用于发送HTTP请求：`npm install axios` - 安装`js-xlsx`处理XLSX：`npm install js-xlsx xlsx-style` 2. **从服务器下载模板**： 使用`axios`发起GET请求，获取服务器上的xlsx文件内容。例如： ```javascript const axios = require('axios'); axios.get('/template.xlsx') .then(response => { const workbook = XLSX.read(response.data, { type: 'binary' }); // workbook现在包含了模板的数据 }) .catch(error => console.error('Error downloading template:', error)); ``` 3. **自定义边框样式**： 使用`xlsx-style`库可以添加自定义样式。假设你想给某个范围的单元格添加边框： ```javascript const styles = XLSX_styles(workbook.SheetNames[0], workbook.Sheets); const borderedCellRange = 'A1:B5'; // 示例范围 const borderSettings = { border: [ { color: 'FF0000', style: 'thin', side: 'all' }, // 红色细边框 { color: '00FF00', style: 'medium', side: ['top', 'bottom'] } // 绿色上、下粗边框 ] }; const cellProperties = XLSX_cellProp({ range: borderedCellRange, properties: borderSettings }); XLSX.utils.applycellStyles(cellProperties, styles); ``` 4. **生成新的XLSX文件**： 将修改后的样式应用到工作簿后，你可以将其转换回二进制字符串并提供给用户下载： ```javascript const newFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' }); const blob = new Blob([newFile], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); const url = URL.createObjectURL(blob); // 提供给用户下载链接或创建a标签触发下载 downloadButton.href = url; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值