首页 > 其他分享 >Vue2纯前端导出

Vue2纯前端导出

时间:2023-11-24 19:13:53浏览次数:34  
标签:XLSX const 前端 导出 item Vue2 sheet data newarraytwo

 //导出
    exportExcel() {
      //构造数据
      const data = [
        ['姓名', '手机号码', '卡号', '身份等级'],
        ...this.list.map((item) => [item.clientName, item.clientPhone, item.card, item.standing]),
      ]
      let data1 = []
      data1.push(data[0])
      let data2 = []
      for (let i = 0; i < data.length; i++) {
        if (i > 0) {
          data2.push(data[i])
        }
      }
      const arr = data2
      const newArray = arr.filter((subArr) => subArr[subArr.length - 1] === true)
      const newarraytwo = data1.concat(newArray)

      // const newarraytwo = newArray.insert(0, data1)
      // console.log(newarraytwo)
      const workbook = XLSX.utils.book_new()
      const sheet = XLSX.utils.aoa_to_sheet(newarraytwo)
      XLSX.utils.book_append_sheet(workbook, sheet, 'sheet1')
      //将workbook导出为Excel文件
      const execlBuffer = XLSX.write(workbook, {
        bookType: 'xlsx',
        type: 'array',
      })
      const excelBlob = new Blob([execlBuffer], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      })
      saveAs(excelBlob, 'data.xlsx')
    },

 

标签:XLSX,const,前端,导出,item,Vue2,sheet,data,newarraytwo
From: https://www.cnblogs.com/m0616/p/17854550.html

相关文章

  • HHDESK客户端连接导入导出
    HHDESK客户端连接可以一键导出xlsx表格进行备份,也可一键导入设置连接。1导出点击“资源”——“导出”在弹出框中选择“保存”即可。2导入右键“资源”——“导入”点击“浏览”,选择相应的xlsx文档;点击“确认”。选择“恢复”即可导入连接。......
  • LiteCVR前端解码与后端解码有何区别?一文看懂
    高效的视频监控安防解决方案不仅能够捕捉相关画面,更有助于在将来实现以数据驱动的安防功能。视频监控是安防模块的重要环节,随着互联网技术的进步,视频监控技术的发展也越来越快。前两期我们介绍了LiteCVRv3.4版本的页面布局,在【配置中心】-【基础配置】-【开关配置】中有个【前端......
  • 满满干货!搭建智能视频监控系统如何挑选前端设备?
    在此前的文章中,小编也和大家讨论过如何选择适合场景需求又性价比高的摄像头。除了摄像头以外,智能监控系统的组成也少不了前端设备,今天就给大家介绍一下几大前端设备的区别与应用场景吧。在智能视频监控中,前端设备一般分为四类,主要为:视频接入网关、安全联网设备、边缘存储网关与......
  • 若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页
    若依vue前端动态设置路由path不同参数在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起:https://blog.csdn.net/weixin_43991241/article/details/126319259?ops_request_misc=&request_id=&biz_id=102&utm_term=matched.redir......
  • 使用golang写一个导出excel的接口
    Craftedby[Genie](https://marketplace.visualstudio.com/items?itemName=genieai.chatgpt-vscode)You使用golang写一个导出excel的接口Genie要创建一个使用Go语言编写的导出Excel文件的接口,我们需要做几个步骤:安装依赖:我们将使用excelize库来创建和操作Excel文件。......
  • CDR F9不显示图像,导出选择图像不显示
       ......
  • 前端必学——实现电商图片放大镜效果(附代码)
    放大镜可以说是前端人必须学会的程序之一,今天的案例为大家展示一下怎么实现放大镜的效果!效果图展示  整个效果就是当鼠标放到展示图上的时候,会出现一个遮罩层以及弹出来一个框展示一个详情图,并且鼠标移动的时候详情图跟着移动,鼠标离开详情图消失。HTML代码:<html><head><style>#sm......
  • java-EasyExcel模板导出
    前言: 需求:根据自定义模板导出Excel,包含图片、表格,采用EasyExcel 提示:EasyExcel请使用3.0以上版本,对图片操作最重要的类就是WriteCellData<Void>如果你的easyexcel没有这个类,说明你的版本太低,请升级到3.0以上<dependency><groupId>com.alibaba</groupId><ar......
  • 分享SpringBoot2 仿B站高性能前端+后端项目
    点击下崽:分享SpringBoot2仿B站高性能前端+后端项目  提取码:cj2sSpringBoot2仿B站高性能前端+后端项目在当今的互联网时期,视频分享平台如B站等备受欢送。它们的胜利很大水平上归功于其高性能的前端和后端技术。在本文中,我们将讨论如何运用SpringBoot2框架和相关技术来创立一个相......
  • 前端vue使用表单form或表格table时的注意事项
     如图,该table表格的data名字为:MyData因此在后面需要在表格里展示数据的时候需要给MyData赋值如下图  注意必须为 1result.data.data 不能是result.data......