XLSX实现分页导出json数据

最新推荐文章于 2024-04-09 16:12:35 发布
最新推荐文章于 2024-04-09 16:12:35 发布
阅读量268 收藏 1
点赞数 1
文章标签： json javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_ziShan/article/details/131441033
版权

1.使用XLSX前先安装，在vue文件引用


<div class="dialog-footer" style="text-align: center;padding: 4px 0;">
    <el-button @click="excelData" type="primary">导出</el-button>
</div>


import * as XLSX from 'xlsx'

 methods: {
    // 导出excel
    excelData() {
      try {
        const nowTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
        const filename = `智能测试数据${nowTime}.xlsx`

        const workbook = XLSX.utils.book_new(); // 创建工作簿

        for (let i = 0; i < 4; i++) {
          const data = {
            sheetName: 'CH' + (i + 1),// 分页名称
            // 导出excel的表头
            tHeader: ['序号', '工步名称', '电流(A)', '电压(V)', '协议', '模式', '测试电流(A)', '测试电压(V)', '测试范围(V)', '测试结果(V)', '测试时间'],
            // filterVal 与中文表头对应对象属性名称
            filterVal: ['num', 'name', 'writeElectricity', 'writeVoltage', 'protocol', 'mode', 'electricity', 'voltage', 'scope', 'results', 'testDate'],
            list: this.testData[i].printData
          };

          const formattedData = this.formatJson(data.filterVal, data.list);
          const worksheetData = [data.tHeader, ...formattedData]; // 添加标题行和数据行
          const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作表
          XLSX.utils.book_append_sheet(workbook, worksheet, data.sheetName) // 将工作表添加到工作簿
        }

        XLSX.writeFile(workbook, filename); // 导出Excel文件
      } catch (error) {
        console.log(error)
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
}

2.导出数据为

chList: [
          {
              label: "CH1",
              name: "first",
              tableDatas: [
                  {
                      name: "PD5V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "5.0",
                      decoyVoltage: "5.0",
                      electricity: "1.0",
                      upLimit: "5.5",
                      lowerLimit: "4.5",
                      isStart: false,
                      testval: "0",
                      scope: "4.5~5.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD9V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "9.0",
                      decoyVoltage: "9.0",
                      electricity: "1.0",
                      upLimit: "9.5",
                      lowerLimit: "8.5",
                      isStart: false,
                      testval: "0",
                      scope: "8.5~9.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD12V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "12.0",
                      decoyVoltage: "12.0",
                      electricity: "1.0",
                      upLimit: "12.5",
                      lowerLimit: "11.5",
                      isStart: false,
                      testval: "0",
                      scope: "11.5~12.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD15V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "15.0",
                      decoyVoltage: "15.0",
                      electricity: "1.0",
                      upLimit: "15.5",
                      lowerLimit: "14.5",
                      isStart: false,
                      testval: "0",
                      scope: "14.5~15.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD20V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "20.0",
                      decoyVoltage: "20.0",
                      electricity: "1.0",
                      upLimit: "20.5",
                      lowerLimit: "19.5",
                      isStart: false,
                      testval: "0",
                      scope: "19.5~20.5",
                      time: "0",
                      timeout: "0"
                  }
              ]
          },
          {
              label: "CH2",
              name: "second",
              tableDatas: [
                  {
                      name: "PD5V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "5.0",
                      decoyVoltage: "5.0",
                      electricity: "1.0",
                      upLimit: "5.5",
                      lowerLimit: "4.5",
                      isStart: false,
                      testval: "0",
                      scope: "4.5~5.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD9V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "9.0",
                      decoyVoltage: "9.0",
                      electricity: "1.0",
                      upLimit: "9.5",
                      lowerLimit: "8.5",
                      isStart: false,
                      testval: "0",
                      scope: "8.5~9.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD12V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "12.0",
                      decoyVoltage: "12.0",
                      electricity: "1.0",
                      upLimit: "12.5",
                      lowerLimit: "11.5",
                      isStart: false,
                      testval: "0",
                      scope: "11.5~12.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD15V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "15.0",
                      decoyVoltage: "15.0",
                      electricity: "1.0",
                      upLimit: "15.5",
                      lowerLimit: "14.5",
                      isStart: false,
                      testval: "0",
                      scope: "14.5~15.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD20V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "20.0",
                      decoyVoltage: "20.0",
                      electricity: "1.0",
                      upLimit: "20.5",
                      lowerLimit: "19.5",
                      isStart: false,
                      testval: "0",
                      scope: "19.5~20.5",
                      time: "0",
                      timeout: "0"
                  }
              ]
          },
          {
              label: "CH3",
              name: "third",
              tableDatas: [
                  {
                      name: "PD5V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "5.0",
                      decoyVoltage: "5.0",
                      electricity: "1.0",
                      upLimit: "5.5",
                      lowerLimit: "4.5",
                      isStart: false,
                      testval: "0",
                      scope: "4.5~5.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD9V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "9.0",
                      decoyVoltage: "9.0",
                      electricity: "1.0",
                      upLimit: "9.5",
                      lowerLimit: "8.5",
                      isStart: false,
                      testval: "0",
                      scope: "8.5~9.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD12V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "12.0",
                      decoyVoltage: "12.0",
                      electricity: "1.0",
                      upLimit: "12.5",
                      lowerLimit: "11.5",
                      isStart: false,
                      testval: "0",
                      scope: "11.5~12.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD15V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "15.0",
                      decoyVoltage: "15.0",
                      electricity: "1.0",
                      upLimit: "15.5",
                      lowerLimit: "14.5",
                      isStart: false,
                      testval: "0",
                      scope: "14.5~15.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD20V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "20.0",
                      decoyVoltage: "20.0",
                      electricity: "1.0",
                      upLimit: "20.5",
                      lowerLimit: "19.5",
                      isStart: false,
                      testval: "0",
                      scope: "19.5~20.5",
                      time: "0",
                      timeout: "0"
                  }
              ]
          },
          {
              label: "CH4",
              name: "fourth",
              tableDatas: [
                  {
                      name: "PD5V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "5.0",
                      decoyVoltage: "5.0",
                      electricity: "1.0",
                      upLimit: "5.5",
                      lowerLimit: "4.5",
                      isStart: false,
                      testval: "0",
                      scope: "4.5~5.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD9V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "9.0",
                      decoyVoltage: "9.0",
                      electricity: "1.0",
                      upLimit: "9.5",
                      lowerLimit: "8.5",
                      isStart: false,
                      testval: "0",
                      scope: "8.5~9.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD12V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "12.0",
                      decoyVoltage: "12.0",
                      electricity: "1.0",
                      upLimit: "12.5",
                      lowerLimit: "11.5",
                      isStart: false,
                      testval: "0",
                      scope: "11.5~12.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD15V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "15.0",
                      decoyVoltage: "15.0",
                      electricity: "1.0",
                      upLimit: "15.5",
                      lowerLimit: "14.5",
                      isStart: false,
                      testval: "0",
                      scope: "14.5~15.5",
                      time: "0",
                      timeout: "0"
                  },
                  {
                      name: "PD20V1A",
                      protocol: 3,
                      currentPro: 3,
                      tabPosition: "CC",
                      voltage: "20.0",
                      decoyVoltage: "20.0",
                      electricity: "1.0",
                      upLimit: "20.5",
                      lowerLimit: "19.5",
                      isStart: false,
                      testval: "0",
                      scope: "19.5~20.5",
                      time: "0",
                      timeout: "0"
                  }
              ]
          }
        ],


3.导出后的表格为

 

Sun202952
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
excel导出为json
04-25
分为数组导出,和键值对导出, 可设置头部长度(用于写备注等), 可设置导出小写, 选择需要的导出编码格式, Save JSON可直接导出, 亦可复制json另行使用
.vue文件_只需三步vue实现excel文件数据提取并存为json数据
weixin_39946300的博客
11-20 510
前言：以前将excel数据导入到数据库是通过前端，将excel文件上传到后端，通过后端语言进行相应的加工将excel文件中的数据取出并存入数据库；从而实现数据库的存入流程。但是这也带来了一些问题，首先是后端对excel文件数据的操作不够透明；其次是通过服务器操作数据会造成服务器压力和储存的压力增加。所以将数据的读取放置到前端是势在必行。Vue将excel中的数据进行提取需要js-xlsx库的支持。...
Xlsx转Json(JS Object/Array) Javascript/Typescript版本
Ethan|实验室
12-18 4756
真xlsx转json，全树无限层可嵌套，兼容数组和对象。
excel 导出为json
01-24
excel 导出为json，方便绘图等软件使用，包括行列值等信息，亦可包括字体等，只要取CELL的属性即可
xlsx转换json文件2
12-26
可以将xlsx中文件转换成json格式。点击bat文件运行。first.xlsx为入口文件。文件中sheet1表格定义数据名和格式（目前格式有num,string,list）,sheet2 定义数据内容。注意：list格式的内容可以是数据，也可以是另一个xlsx文件名。xlsx文件都应在一个文件夹中。输入文件名为xlsxTojson.json（转换成普通json和转换成可导入小程序云开发中格式）
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
本篇文章将深入探讨如何在Vue.js项目中结合`el-table`和`file-saver`库，实现前端导出分页数据到Excel的功能。 首先，我们需要了解`el-table`。它是Element UI的一部分，提供了一种灵活的方式来展示和操作表格数据...
导出excel.zip
06-27
本篇文章将详细介绍如何实现EasyUI Datagrid带分页的所有数据导出到Excel的两种方法。 方法一：JavaScript API导出 EasyUI Datagrid本身并不直接支持导出到Excel，但可以通过JavaScript编程方式实现。首先，我们...
datatable导出json、text、excel、word等格式
08-19
本资源主要涉及的是如何在`DataTable`中实现动态加载数据，并且提供导出数据到不同格式的功能，包括JSON、文本、Excel和Word。 1. **动态加载数据**： 动态加载，也称为懒加载或按需加载，是一种优化网页性能的...
jQuery表格 可选择导出各种格式
08-27
大数据可能导致浏览器性能下降，因此可能需要分页导出或在后端处理数据分片。 总的来说，实现"jQuery表格 可选择导出各种格式"这一功能，需要掌握jQuery、DataTables或其他表格插件的使用，理解Ajax通信，熟悉文件...
vue前端导出Excel.zip
05-22
在Vue.js前端开发中，导出...综上所述，Vue前端导出Excel涉及到选择合适的库，转换数据为工作簿格式，生成`Blob`对象，以及处理浏览器安全限制来实现下载。通过理解这些步骤，你可以根据项目需求灵活地实现导出功能。
Vue中xlsx的导出。
weixin_55451254的博客
08-25 955
utils文件夹下创建xlsx.js。
python读取EXCEL每个sheet页内容，并转为JSON格式，发送请求
boheliang99的博客
12-21 8435
python读取EXCEL每个sheet页各行各列内容，并转为JSON格式，发送请求
三分钟使用vue-json-excel插件,将table表格数据导出为Excel文件实践
愚人码头的博客
11-28 1545
提示:我这是使用了element-ui样式框架,默认是您已经安装了element-ui 安装vue-json-excel插件 npm install vue-json-excel --save 引入vue-json-excel组件 <template> <div> <download-excel :fields = "json_field...
excel数据使用xlsx读取转换成JSON
qq_17859117的博客
12-27 1043
一般读取excel的工作都由后端完成，比如java使用poi插件。如果存在少量非敏感数据，比如日志、模板数据，可以直接由前端搞定。使用xlsx插件。
合并单元格的excel文件转换成json数据格式
最新发布
hello world
04-09 718
【代码】合并单元格的excel文件转换成json数据格式。
js将xlsx/xls 转为json
想想挺好啊
02-27 621
js将xlsx/xls 转为json
vue3使用xlsx导出json数据为excel表格
sywdebug的博客
08-01 2466
可以看到虽然导出了，但是上面name和age显然不是我们想要的，我们想要的是“姓名”和“年龄”，使用。导出文件结果，下面工作表名称就不截了，图片太长不好看，工作表名就是students。更改标题后的结果，可以看到从A1开始数据改变成了刚刚写的数据。也可以改变列宽，我用不到就先不写了，可以自行看官方文档。可以向工作表中添加JS数据的数组实现标题重命名。要导出的数据需要是一个没有嵌套的对象数组。总的来说比之前写的乱七八糟的更简单易懂了。可以看到从B5改变数据为上面添加的。在需要使用的页面引入。......
js实现xlsx, xls转json
天边那朵云的博客
03-27 2621
思路用前端页面提交数据 用node进行写入 数据的过滤逻辑在index.html中完成 node只进行写入操作 文件目录如下 需要现在根目录下启动index.js node index.js 默认端口号是8081 前端页面显示如下 <!DOCTYPE html> <html lang="en"> <head> <meta...
js-xlsx（二）json数据导出excel
天空影
08-09 6377
已经有两篇文章写了怎么导出json到excel，不过那个插件只能做这一项工作，为了结合excel上传导入json数据，所以用js-xlsx这个插件再弄一次 js支持 1、js-xlsx 2、filesave (如果想像我这样引入，需要在源代码中删除最前面的export) 3、mock.js &lt;script src="https://cdn.bootcss.com/jquery/...
django实现导出xlsx数据
07-25
要在Django中实现导出为XLSX数据，你可以按照以下步骤进行操作： 1. 首先，确保你的Django项目已经安装了openpyxl库。你可以通过运行以下命令来安装它： ``` pip install openpyxl ``` 2. 创建一个视图函数来处理...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值