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

已于 2024-06-13 10:24:39 修改
阅读量885 收藏 12
点赞数 8
文章标签： 前端 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
版权

做项目的时候遇到了导出复杂表格，合并单元格没规则且无厘头，网上找了很久没找到一样的（最后找了一个很相似改成自己的需求，具体看vue：功能【xlsx】动态行内合并），后端不愿意做，争论了很久，最后的最后。。。他只愿意给树形数据加了一个字段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
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    8
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    12
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vue+element并使用xlsx实现导出excel

				
			

			

				

					06-14
				

			

		

		

			
				
vue+element并使用xlsx实现导出excel

			
		

	



                

              
                



	

		

			

				
					
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格）

				
			

			

				

					08-30
				

			

		

		

			
				
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格），适用于前端开发人员，在非分页场景下对于table的导出。 主要方法：_export_table_to_excel()，在ExportExcel.js...

			
		

	



                


  
              

                


	

		

			

				
					
vue项目表格导出excel

				
			

			

				

					only_的博客
				

				

					08-16
					
					203
					
				

			

		

		

			
				
<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

				
			

			

				

					帆酱的博客
				

				

					05-02
					
					1189
					
				

			

		

		

			
				
一、安装插件二、直接导出当前表格数据（配合element-ui使用）三、通过数据插入导出（json转excel格式导出）

			
		

	



		

			
		



	

		

			

				
					
Vue中xlsx的导出。

				
			

			

				

					weixin_55451254的博客
				

				

					08-25
					
					869
					
				

			

		

		

			
				
utils文件夹下创建xlsx.js。

			
		

	





	

		

			

				
					
vue 导出表格 xlsx

				
			

			

				

					Tianxiaoxixi的博客
				

				

					05-22
					
					1582
					
				

			

		

		

			
				
vue 导出表格 xlsx

			
		

	





	

		

			

				
					
前端vue二维数组解析

				
			

			

				

					09-12
				

			

		

		

			
				
通过vue解析表头合并的表格，后台返回的数据格式为[{name:aa,list:[{value:100}]}] 通过table与v-for组合循环数据达到目的。 vue 表头合并数据解析 vue 二维数组解析 vue 二维list解析 vue table+v-for

			
		

	





	

		

			

				
					
VUE导出Excel，两种方法，方法二带样式：文字居中，自动换行，列宽设置，单元格合并，冻结表头等

				
			

			

				

					03-29
				

			

		

		

			
				
SheetJS免费版的不支持格式，比如居中、自动换行都不行。xlsx-style是SheetJS的一个分支，且支持各种格式，可以做到文字居中，自动换行，列宽设置，单元格合并，冻结表头等。

			
		

	





	

		

			

				
					
antd vue table跨行合并单元格,并且自定义内容实例

				
			

			

				

					01-18
				

			

		

		

			
				
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图：  源码：  export default {  data() {  return {  pic95: require('@/assets/produit/95.png'),  pic99: require('@/assets/produit/99.png'),  ...

			
		

	





	

		

			

				
					
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

				
			

			

				

					12-29
				

			

		

		

			
				
数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果：  树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 ...

			
		

	





	

		

			

				
					
vue导入导出excel文件

				
			

			

				

					04-16
				

			

		

		

			
				
vue导入导出excel文件所需要用到的依赖文件，从网上转载而来，并非原创。大家需要可以从别处下载，这里下载需要积分，本人上传只是为了方便保存以供以后所用。

			
		

	





	

		

			

				
					
vue 前端导出xlsx文件

				
			

			

				

					宁夏前端工程师，马卫斌，wx：1457508895
				

				

					07-25
					
					1281
					
				

			

		

		

			
				
vue 前端导出xlsx文件

			
		

	





	

		

			

				
					
vue导出xlsx表格文件-简单粗暴

				
			

			

				

					weixin_42536961的博客
				

				

					12-28
					
					854
					
				

			

		

		

			
				
最简单最粗暴的导出表格文件-话不多说

			
		

	





	

		

			

				
					
vue框架使用xlsx导出excel表格

				
			

			

				

					qq_46372045的博客
				

				

					09-17
					
					6881
					
				

			

		

		

			
				
vue框架使用xlsx导出自定义样式的excel表格

			
		

	





	

		

			

				
					
Vue导出excel表格

				
			

			

				

					Miku的博客
				

				

					11-04
					
					210
					
				

			

		

		

			
				
// 安装插件
npm install js-table2excel

//导入插件
import table2excel from 'js-table2excel'

js-table2excel是通过数据进行打印的所有需要先获取要打印的数据
// 这边是一个数据格式模板，具体数据可以通过查询数据库获得
 tableData: [{
        user_name: null,
        user_school: null,
        user_grade: null,
        u

			
		

	





	

		

			

				
					
vue   导出xlsx表功能

				
			

			

				

					didumin1941的博客
				

				

					03-29
					
					330
					
				

			

		

		

			
				
详细步骤：
1.需要安装三个依赖：
npm install -S file-saver xlsx                 	npm install -D script-loader
两个命令行包含三个依赖。
2.项目中src下新建一个文件夹：
（vendor---名字任取） 下载：Blob.js和 Export2Excel.js
文件：链接: http://pan.b...

			
		

	





	

		

			

				
					
使用VUE，实现excel导出数据

					
热门推荐

				
			

			

				

					m0_61101835的博客
				

				

					12-02
					
					1万+
					
				

			

		

		

			
				
使用前端vue,js实现导出excel的功能

			
		

	





	

		

			

				
					
vue导出xlsx表格步骤以及数据太多，分表导出

				
			

			

				

					polarisya的博客
				

				

					10-10
					
					1257
					
				

			

		

		

			
				
【代码】vue导出xlsx表格以及数据太多，分表导出。

			
		

	





	

		

			

				
					
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、付费专栏及课程。

              

            

          

      

      余额充值