适用于vue2和vue3的前端导出xlsx（包含合并单元格）：树形数据格式转换成二维数组后进行自定义合并单元格。

已于 2024-07-30 17:44:59 修改
阅读量1.5k 收藏 15
点赞数 9
文章标签： 前端 vue.js javascript excel typescript vue
于 2024-04-28 18:11:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/timi_666/article/details/138285009
版权

做项目的时候遇到了导出复杂表格，合并单元格没规则且无厘头，网上找了很久没找到一样的（最后找了一个很相似改成自己的需求，后端不愿意做，争论了很久，最后的最后。。。他只愿意给树形数据加了一个字段N_Num用来统计子集总数。

最后实现的效果如下图

使用el-table展示：

（后记）适用于vue2和vue3的前端导出xlsx（包含合并单元格）~~~定义合并规则并使用el-table的span-method展示：树形数据格式转换成二维数组后进行自定义合并单元格。-CSDN博客

一、下载包:xlsx   xlsx-js-style  file-saver这三个包

npm install file-saver --save

npm install xlsx --save

npm install  -s xlsx-js-style

二、树形数据结构 N_Num是指第一列需要合并的总数

let treeD = [
    {
      "V_Room": "1#配电室",
      "N_Num": 2,
      "Child": [{
        "V_Transformer": "1#TR1",
        "N_Capacity": 2000,
        "N_TCmax": 120,
        "N_TTmax": 36,
        "N_TCavg": 30,
        "N_TLmax": 50,
        "N_TLavg": 45,
        "N_Num": 1,
        "Child": [
          {
            "V_Generatrix": "1#母线",
            "V_MainLoad": "阴极模切2",
            "N_RatedCurrent": 1000,
            "N_GCmax": 120,
            "N_GTmax": 36,
            "N_GCavg": 30,
            "N_GLmax": 50,
            "N_GLavg": 45
          }]
      },
        {
          "V_Transformer": "1#TR2",
          "N_Capacity": 2000,
          "N_TCmax": 120,
          "N_TTmax": 36,
          "N_TCavg": 30,
          "N_TLmax": 50,
          "N_TLavg": 45,
          "N_Num": 1,
          "Child": [{
            "V_Generatrix": "2#母线",
            "V_MainLoad": "阴极模切2",
            "N_RatedCurrent": 1000,
            "N_GCmax": 120,
            "N_GTmax": 36,
            "N_GCavg": 30,
            "N_GLmax": 50,
            "N_GLavg": 45
          }
          ]
        }
      ]
    },
    {
      "V_Room": "2#配电室",
      "N_Num": 6,
      "Child": [
        {
          "V_Transformer": "2#TR1",
          "N_Capacity": 2000,
          "N_TCmax": 120,
          "N_TTmax": 36,
          "N_TCavg": 30,
          "N_TLmax": 50,
          "N_TLavg": 45,
          "N_Num": 3,
          "Child": [
            {
              "V_Generatrix": "3#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            },
            {
              "V_Generatrix": "4#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            },
            {
              "V_Generatrix": "5#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            }
          ]
        },
        {
          "V_Transformer": "2#TR2",
          "N_Capacity": 2000,
          "N_TCmax": 120,
          "N_TTmax": 36,
          "N_TCavg": 30,
          "N_TLmax": 50,
          "N_TLavg": 45,
          "N_Num": 3,
          "Child": [
            {
              "V_Generatrix": "6#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            },
            {
              "V_Generatrix": "7#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            },
            {
              "V_Generatrix": "8#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            }
          ]
        }
      ]
    },

  ]

下面是处理提前封装好的文件路径是src/utils/timi/outToExcelManySheet.ts,在ts中引入后会报错所以加了    // @ts-ignore     

也可以用src/utils/timi/outToExcelManySheet.js；代码都相同

// @ts-ignore
import FileSaver from "file-saver";
// @ts-ignore
import XLSX from 'xlsx-js-style'

// import * as XLSX from "xlsx";


    // 三个参数：sheetData、mergesHeader 和文件名。
export function exportSheetExcel(sheetData, mergerArr, fileName = 'karlaExport') {
        const wb = XLSX.utils.book_new() // 创建一个新工作簿

        for (let i = 0; i < sheetData.length; i++) {
            const sheet = sheetData[i]

            // 检查数据项是否存在
            if (!sheet.data) {
                continue // 如果数据项不存在，则跳过当前循环
            }

            const ws = XLSX.utils.aoa_to_sheet(sheet.data) // 将数据数组转换为工作表

            // 设置合并单元格
            ws['!merges'] = sheet.merges && sheet.merges.length > 0 ? [...sheet.merges, ...(mergerArr || [])] : mergerArr;

            // 设置列宽为自适应
            if (sheet.data.length > 0) {
                ws['!cols'] = sheet.data[0].map((_, index) => ({ wch: 15 }))
            }

            // 设置行高
            if (sheet.rowHeights && sheet.rowHeights.length > 0) {
                ws['!rows'] = sheet.rowHeights.map((height) => ({ hpt: height, hpx: height }))
            }

            const borderAll = {
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' }
            }

            // 设置单元格样式
            for (const key in ws) {
                if (ws.hasOwnProperty(key)) {
                    const cell = ws[key]
                    if (typeof cell === 'object') {
                        cell.s = {
                            border: borderAll,
                            alignment: {
                                horizontal: 'center',
                                vertical: 'center',
                                wrapText: true
                            },
                            font: {
                                sz: 12,
                                bold:false,
                                color: {
                                    rgb: '000000'
                                }
                            },
                            numFmt: 'General',
                            fill: {
                                fgColor: { rgb: 'FFFFFF' }
                            }
                        }
                    }
                }
            }
            //大标题加粗 不需要的可以注释掉
            ws.A1.s.font.bold=true
            ws.A1.s.border = {
                top: { style: 'none' },
                bottom: { style: 'none' },
                left: { style: 'none' },
                right: { style: 'none' }
            }
            // console.log(wb, )
            XLSX.utils.book_append_sheet(wb, ws, sheet.name) // 将工作表添加到工作簿并指定名称
        }

        const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }) // 将工作簿转换为数组

        const file = new Blob([wbout], { type: 'application/octet-stream' }) // 创建Blob对象
        FileSaver.saveAs(file, fileName+'.xlsx') // 下载文件
    }
    // 二维数组中空的数据设置为 0
function emptyValues(array, defaultValue) {
        for (let i = 0; i < array.length; i++) {
            for (let j = 0; j < array[i].length; j++) {
                if (array[i][j] === null || array[i][j] === undefined || array[i][j] === '') {
                    array[i][j] = defaultValue
                }
            }
        }
        return array
    }
    // 生成excel列表数据
function   handleExcelTable(columnHeader, list) {
        if (list.length === 0) return []

        // 表头
        const tableColumn = Object.keys([columnHeader][0])

        // 表格生成的数据
        const sheet = [tableColumn]
        list.forEach((item) => {
            const row = tableColumn.map((column) => item[column])
            sheet.push(row)
        })

        // 表头匹配对应的中文
        const firstRow = sheet[0].map((column) => columnHeader[column])
        sheet[0] = firstRow

        return sheet || []
    }

此处用的是vue3，在你的页引入方法 

import {exportSheetExcel} from '/@/utils/timi/outToExcelManySheet.ts'

r 表示行索引，c 表示列索引

  const mergesHeader = [
    {s: {r: 0, c: 0}, e: {r: 0, c: 15}}, // 第0列的第0行和第15列的0行合并
    // 行合并
    // { s: { r: 0, c: 3 }, e: { r: 0, c: 5 } },
    // { s: { r: 0, c: 6 }, e: { r: 0, c: 8 } },
    // 列合并（r 表示行索引，c 表示列索引）
    // { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } }, // 第0列的第0行和第1行合并
    // { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } }, // 第1列的第0行和第1行合并
    // { s: { r: 0, c: 2 }, e: { r: 1, c: 2 } }, // 第2列的第1行和第1行合并

  ]

三、完整代码如下

<template>
  <div class="system-menu w-h-100">
    <el-button @click="exportXLSx">导出</el-button>
  </div>
</template>
<script lang="ts" setup>
import {nextTick, onMounted, reactive, ref, toRefs} from 'vue';
import {exportSheetExcel} from '/@/utils/timi/outToExcelManySheet.ts'

const exportXLSx = ()=>{
  let treeD = [
    {
      "V_Room": "1#配电室",
      "N_Num": 2,
      "Child": [{
        "V_Transformer": "1#TR1",
        "N_Capacity": 2000,
        "N_TCmax": 120,
        "N_TTmax": 36,
        "N_TCavg": 30,
        "N_TLmax": 50,
        "N_TLavg": 45,
        "N_Num": 1,
        "Child": [
          {
            "V_Generatrix": "1#母线",
            "V_MainLoad": "阴极模切2",
            "N_RatedCurrent": 1000,
            "N_GCmax": 120,
            "N_GTmax": 36,
            "N_GCavg": 30,
            "N_GLmax": 50,
            "N_GLavg": 45
          }]
      },
        {
          "V_Transformer": "1#TR2",
          "N_Capacity": 2000,
          "N_TCmax": 120,
          "N_TTmax": 36,
          "N_TCavg": 30,
          "N_TLmax": 50,
          "N_TLavg": 45,
          "N_Num": 1,
          "Child": [{
            "V_Generatrix": "2#母线",
            "V_MainLoad": "阴极模切2",
            "N_RatedCurrent": 1000,
            "N_GCmax": 120,
            "N_GTmax": 36,
            "N_GCavg": 30,
            "N_GLmax": 50,
            "N_GLavg": 45
          }
          ]
        }
      ]
    },
    {
      "V_Room": "2#配电室",
      "N_Num": 6,
      "Child": [
        {
          "V_Transformer": "2#TR1",
          "N_Capacity": 2000,
          "N_TCmax": 120,
          "N_TTmax": 36,
          "N_TCavg": 30,
          "N_TLmax": 50,
          "N_TLavg": 45,
          "N_Num": 3,
          "Child": [
            {
              "V_Generatrix": "3#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            },
            {
              "V_Generatrix": "4#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            },
            {
              "V_Generatrix": "5#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            }
          ]
        },
        {
          "V_Transformer": "2#TR2",
          "N_Capacity": 2000,
          "N_TCmax": 120,
          "N_TTmax": 36,
          "N_TCavg": 30,
          "N_TLmax": 50,
          "N_TLavg": 45,
          "N_Num": 3,
          "Child": [
            {
              "V_Generatrix": "6#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            },
            {
              "V_Generatrix": "7#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            },
            {
              "V_Generatrix": "8#母线",
              "V_MainLoad": "阴极模切2",
              "N_RatedCurrent": 1000,
              "N_GCmax": 120,
              "N_GTmax": 36,
              "N_GCavg": 30,
              "N_GLmax": 50,
              "N_GLavg": 45
            }
          ]
        }
      ]
    },

  ]
  console.log(treeD)
  let DoubleArr = [];//存二维数组
  let MergesListData = [];//存合并单元格数据

  let FirstRow = 2//我是从第3行第0列开始的，excel的下标是从0开始，所以此处2对应excel的第三行；相当于起点，用来计算合并数量的变量
  let SecondRow = 2//我是从第3行第0列开始的，excel的下标是从0开始，所以此处2对应excel的第三行

  for (let i = 0; i < treeD.length; i++) { // 第一层循环，遍历树的根节点
    let currentNode = treeD[i];
    MergesListData.push(
        {s: {r: FirstRow, c: 0}, e: {r: FirstRow + currentNode.N_Num - 1, c: 0}},
    )
    console.log(currentNode.N_Num)
    FirstRow = FirstRow + currentNode.N_Num
    for (let j = 0; j < currentNode.Child.length; j++) { // 第二层循环，遍历当前节点的子节点
      let childNode = currentNode.Child[j];
      MergesListData.push(
          {s: {r: SecondRow, c: 1}, e: {r: SecondRow + childNode.N_Num - 1, c: 1}},
          {s: {r: SecondRow, c: 2}, e: {r: SecondRow + childNode.N_Num - 1, c: 2}},
          {s: {r: SecondRow, c: 3}, e: {r: SecondRow + childNode.N_Num - 1, c: 3}},
          {s: {r: SecondRow, c: 4}, e: {r: SecondRow + childNode.N_Num - 1, c: 4}},
          {s: {r: SecondRow, c: 5}, e: {r: SecondRow + childNode.N_Num - 1, c: 5}},
          {s: {r: SecondRow, c: 6}, e: {r: SecondRow + childNode.N_Num - 1, c: 6}},
          {s: {r: SecondRow, c: 7}, e: {r: SecondRow + childNode.N_Num - 1, c: 7}},
      )
      SecondRow = SecondRow + childNode.N_Num
      for (let k = 0; k < childNode.Child.length; k++) {
        // 第三层循环，遍历子节点的子节点（最深层的节点）
        let deepestNode = childNode.Child[k];

        DoubleArr.push([currentNode.V_Room,
          childNode.V_Transformer,
          childNode.N_Capacity,
          childNode.N_TCmax,
          childNode.N_TTmax,
          childNode.N_TCavg,
          childNode.N_TLmax,
          childNode.N_TLavg,
          deepestNode.V_Generatrix,
          deepestNode.V_MainLoad,
          deepestNode.N_RatedCurrent,
          deepestNode.N_GCmax,
          deepestNode.N_GTmax,
          deepestNode.N_GCavg,
          deepestNode.N_GLmax,
          deepestNode.N_GLavg,

        ]);
      }
    }
  }
  console.log(DoubleArr, MergesListData)
  let titleList = []

  for (let i = 1; i < 17; i++) {
    titleList.push('标题' + i)
  }
  const sheet1 = {
    name: 'LeavePay',
    // data: [header, ...OutExcelSheet.handleExcelTable(columnsHeader, list.value)],  // 常规list数据用封装的方法处理二维数据
    data: [['这是大标题'], titleList, ...DoubleArr],  // 使用处理好的mock数据
    merges: [],
    rowHeights: [{hpx: 20}, {hpx: 20}]
  }
  sheet1.merges = MergesListData
  let sheetData = [sheet1]
  const mergesHeader = [
    {s: {r: 0, c: 0}, e: {r: 0, c: 15}}, // 第0列的第0行和第15列的0行合并 "这是大标题"
    // 行合并
    // { s: { r: 0, c: 3 }, e: { r: 0, c: 5 } },
    // { s: { r: 0, c: 6 }, e: { r: 0, c: 8 } },
    // 列合并（r 表示行索引，c 表示列索引）
    // { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } }, // 第0列的第0行和第1行合并
    // { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } }, // 第1列的第0行和第1行合并
    // { s: { r: 0, c: 2 }, e: { r: 1, c: 2 } }, // 第2列的第1行和第1行合并

  ]
  exportSheetExcel(sheetData, mergesHeader, `导出`)
}

</script>
<style lang="scss" scoped>
//@import "./src/assets/styles/index.scss";
</style>

希望能帮助到您！有用的话点个三连（点赞，收藏，关注）吧！！！

参考文档

 xlsx-js-style官网

vue：功能【xlsx】动态行内合并_vue 导出excel 合并单元格-CSDN博客


                

        

        

    

  


            

                    
            

    

      

        

            

              
                
                  Timi_666
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
vue组件 导出excel,并且可以合并单元格，设置宽度，字体颜色，换行等

				
			

			

				

					qq_40247562的博客
				

				

					07-17
					
					1780
					
				

			

		

		

			
				
需求：在开发后台管理系统中，经常会有导出表格的需求，本案例实现了在导出时，可以合并单元格，设置单元格字体颜色和宽度，插件：xlsx（0.18.4），xlsx-style（0.8.13），file-saver（2.0.5）

			
		

	



                

            
              



	

		

			

				
					
前端使用xlsx-js-style导出Excel，带样式，并处理合并单元格边框显示不全和动态插入表头解决

					
最新发布

				
			

			

				

					ccyyss的专栏
				

				

					09-27
					
					1000
					
				

			

		

		

			
				
前端纯js导出Excel，带样式和合并单元边框

			
		

	



              


  
              

                


	

		

			

				
					
vue 树形表格导出excel

				
			

			

				

					一只小木头的博客
				

				

					11-16
					
					2695
					
				

			

		

		

			
				
需求
可以结合element表格直接导出excel，也可以用于树形表格或者树形结构的数据导出excel
安装依赖
npm install file-saver xlsx --save

npm install script-loader --save

需要文件
由于我用的vite构建的项目，无法使用require导入文件，因此使用的是import导入js文件
在src文件夹下建立一个文件夹，命名为vendor,并建立两个js文件，分别命名为Blob,Export2Excel

Blob:作用为处理二进制


			
		

	





	

		

			

				
					
Vue 导出Excel表格，并实现合并单元格方法

				
			

			

				

					weixin_44523517的博客
				

				

					08-03
					
					6442
					
				

			

		

		

			
				
Vue 导出Excel表格，并实现合并单元格方法

			
		

	



		

			
		



	

		

			

				
					
vue：功能【xlsx】动态行内合并

				
			

			

				

					1363648943的专栏
				

				

					03-14
					
					2814
					
				

			

		

		

			
				
在代码中，使用了一个名为 sheet1 的对象来定义表格的名称、数据、合并单元格和行高等信息。4、最后，通过调用 OutExcelSheet.exportSheetExcel 函数，并传递以上参数，将生成的 Excel 文件导出到本地。注）生成的excel封装的方法如下（支持表头合并、导出的 excel 支持生成多个sheet工作表、表格可自适应宽度、自适应高度、合并表格）2、前端代码，导出，用的mock数据，是转换后的二维数组，封装的方法中有写。场景：纯前端导出excel数据，涉及到列合并、行合并。

			
		

	





	

		

			

				
					
vue把数据导出为Excel表格(合并单元格，修改样式)

				
			

			

				

					rain_pen的博客
				

				

					06-29
					
					2826
					
				

			

		

		

			
				
const merges = ['A1:A2', 'B1:B2', 'C1:E1'] // 合并单元格的数据，如何合并参考上面图片讲解。multiHeader = [],  // 第一行表头。multiHeader = [],  // 第一行表头。const multiHeader = ['', '', '测试3', '测试4', '测试5']const multiHeader2 = ['测试1', '测试2', '测试', '', '']horizontal: 'center',//水平居中。

			
		

	





	

		

			

				
					
vue项目中导出带合并元格的表格

				
			

			

				

					weixin_45552104的博客
				

				

					10-30
					
					419
					
				

			

		

		

			
				
首先安装插件
npm install xlsx
或者
yarn add xlsx

其次导入 也可以全局引入
import XLSX from 'xlsx'

然后 可以写个函数将里面内容填入
var aoa = [
          [
            '羊别', 
            '阶段', 
            '昨日存栏', 
            '出生数', 
            '调入', 
            '购入数', 
            '转入数'

			
		

	





	

		

			

				
					
前端vue生成导出excel文档

				
			

			

				

					02-10
				

			

		

		

			
				
2. 在Vue组件中，首先准备要导出的数据，通常以二维数组的形式存储，每行代表一个工作表的行，每个元素代表单元格的值。 3. 使用xlsx库的`utils.book_new()`创建一个新的工作簿对象，然后通过`utils.book_append_...

			
		

	





	

		

			

				
					
Vue+elementui 实现复杂表头和动态增加列的二维表格功能

				
			

			

				

					10-16
				

			

		

		

			
				
这里假设`结果_data`是包含所有行数据的数组，我们可以通过循环处理，将数据转换成适配二维表格的格式：  ```javascript for (let index1 = 3; index1 (结果_data[0]).length; index1++) {  let newmap = new Map();...

			
		

	





	

		

			

				
					
vue导出excel并修改表头样式

				
			

			

				

					10-29
				

			

		

		

			
				
在Vue.js应用中导出Excel并修改表头样式是一个常见的需求，这主要涉及到前端数据处理、Excel文件生成以及样式定制等方面的知识。以下是一份详细的技术指南，帮助你理解和实现这个功能。  1. **Vue.js基础知识**：Vue...

			
		

	





	

		

			

				
					
vue实现导出Excel的两个js文件-Blob+Export2Excel

				
			

			

				

					11-20
				

			

		

		

			
				
2. **准备数据**：在Vue中，你需要将需要导出的数据整理成一个二维数组，每一行代表一行Excel数据，每一列代表一个单元格。例如：  ```javascript  const data = [  ['姓名', '年龄', '性别'],  ['张三', 25, '男'],...

			
		

	





	

		

			

				
					
vue合并单元格

				
			

			

				

					11-30
				

			

		

		

			
				
vue合并单元格最简方法vue合并单元格最简方法vue合并单元格最简方法

			
		

	





	

		

			

				
					
Vue的Excel导出详细步骤（亲测可用）.rar

				
			

			

				

					05-13
				

			

		

		

			
				
该库通常接受一个二维数组作为输入，这个数组的每个元素代表Excel表格中的一行数据，每个子数组代表一行中的单元格数据。通过调用Export2Excel.js的函数，我们可以将数据转换为XLSX格式，并利用Blob.js将其转化为可...

			
		

	





	

		

			

				
					
vue+element导出excel,并修改样式，以及动态合并单元格

				
			

			

				

					weixin_66709443的博客
				

				

					12-05
					
					1032
					
				

			

		

		

			
				
会报错：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 807行 的 var cpt = require(’./cpt’ + ‘able’);注意：如果安装了npm install --save xlsx-style。头部数据以及内容区域数据的合并函数。

			
		

	





	

		

			

				
					
vue2导出excel，合并单元格的表格

				
			

			

				

					CHENC0518的博客
				

				

					01-06
					
					808
					
				

			

		

		

			
				
1.先引入一个js文件，作为主要导出函数。2. 在vue中定义导出函数。

			
		

	





	

		

			

				
					
vue导出数据为excel表格及合并单元格

				
			

			

				

					weixin_51666715的博客
				

				

					08-31
					
					2013
					
				

			

		

		

			
				
前端vuetable数据以excel表格形式导出,并实现单元格合并

			
		

	





	

		

			

				
					
vue项目表格导出excel

				
			

			

				

					only_的博客
				

				

					08-16
					
					267
					
				

			

		

		

			
				
<el-button class="yellow fl" @click="exportExcel">导出</el-button>

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

exportExcel() {
         /* generate workbook object from tabl...

			
		

	





	

		

			

				
					
Vue中xlsx的导出。

				
			

			

				

					weixin_55451254的博客
				

				

					08-25
					
					1033
					
				

			

		

		

			
				
utils文件夹下创建xlsx.js。

			
		

	





	

		

			

				
					
vue 导出excel，合并单元格，修改样式

				
			

			

				

					m0_49494051的博客
				

				

					10-25
					
					2801
					
				

			

		

		

			
				
vue 导出excel，合并单元格，改改样式

			
		

	





	

		

			

				
					
vue将二维数组的字符串重新还原成二维数组

				
			

			

				

					01-30
				

			

		

		

			
				
在Vue中，你可以使用`JSON.parse()`方法将二维数组的字符串重新还原成二维数组。下面是一个示例代码：

```javascript
// 假设你有一个二维数组的字符串
var str = '[["apple", "banana"], ["orange", "grape"]]';

// 使用JSON.parse()方法将字符串转换为二维数组
var arr = JSON.parse(str);

// 输出二维数组
console.log(arr); // [["apple", "banana"], ["orange", "grape"]]
```

通过使用`JSON.parse()`方法，你可以将二维数组的字符串重新还原成原始的二维数组。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值