前端实现导出excel表格

news2024/11/27 22:30:19
需求：实现勾选行导出为表格

在这里插入图片描述

一、安装插件
npm install --save file-saver xlsx

运行项目报如下警告的话 运行npm install xlsx@0.16.0 --save 来降低版本号（最初我安装的版本号是0.18.16的版本）再次运行项目就不会报如下警告了

在这里插入图片描述

二、新建一个excel.js文件

我存放的路径如下图（下面代码会引入此路径）：

在这里插入图片描述

import { saveAs } from 'file-saver'
import XLSX from 'xlsx'

function generateArray(table) {
  const out = []
  const rows = table.querySelectorAll('tr')
  const ranges = []
  for (let R = 0; R < rows.length; ++R) {
    const outRow = []
    const row = rows[R]
    const columns = row.querySelectorAll('td')
    for (let C = 0; C < columns.length; ++C) {
      const cell = columns[C]
      let colspan = cell.getAttribute('colspan')
      let rowspan = cell.getAttribute('rowspan')
      let cellValue = cell.innerText
      if (cellValue !== '' && cellValue === +cellValue) cellValue = +cellValue

      ranges.forEach(function (range) {
        if (
          R >= range.s.r &&
          R <= range.e.r &&
          outRow.length >= range.s.c &&
          outRow.length <= range.e.c
        ) {
          for (let i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null)
        }
      })

      if (rowspan || colspan) {
        rowspan = rowspan || 1
        colspan = colspan || 1
        ranges.push({
          s: {
            r: R,
            c: outRow.length,
          },
          e: {
            r: R + rowspan - 1,
            c: outRow.length + colspan - 1,
          },
        })
      }

      outRow.push(cellValue !== '' ? cellValue : null)

      if (colspan) for (let k = 0; k < colspan - 1; ++k) outRow.push(null)
    }
    out.push(outRow)
  }
  return [out, ranges]
}

function datenum(v, date1904) {
  if (date1904) v += 1462
  const epoch = Date.parse(v)
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}

function sheet_from_array_of_arrays(data) {
  const ws = {}
  const range = {
    s: {
      c: 10000000,
      r: 10000000,
    },
    e: {
      c: 0,
      r: 0,
    },
  }
  for (let R = 0; R !== data.length; ++R) {
    for (let C = 0; C !== data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R
      if (range.s.c > C) range.s.c = C
      if (range.e.r < R) range.e.r = R
      if (range.e.c < C) range.e.c = C
      const cell = {
        v: data[R][C],
      }
      if (cell.v === null) continue
      const cell_ref = XLSX.utils.encode_cell({
        c: C,
        r: R,
      })

      if (typeof cell.v === 'number') cell.t = 'n'
      else if (typeof cell.v === 'boolean') cell.t = 'b'
      else if (cell.v instanceof Date) {
        cell.t = 'n'
        cell.z = XLSX.SSF._table[14]
        cell.v = datenum(cell.v)
      } else cell.t = 's'

      ws[cell_ref] = cell
    }
  }
  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
  return ws
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook()
  this.SheetNames = []
  this.Sheets = {}
}

function s2ab(s) {
  const buf = new ArrayBuffer(s.length)
  const view = new Uint8Array(buf)
  for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
  return buf
}

export function export_table_to_excel(id) {
  const theTable = document.getElementById(id)
  const oo = generateArray(theTable)
  const ranges = oo[1]

  const data = oo[0]
  const ws_name = 'SheetJS'

  const wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data)

  ws['!merges'] = ranges

  wb.SheetNames.push(ws_name)
  wb.Sheets[ws_name] = ws

  const wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
  })

  saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream',
    }),
    'test.xlsx'
  )
}

export function export_json_to_excel({
  multiHeader = [],
  header,
  data,
  filename,
  merges = [],
  autoWidth = true,
  bookType = 'xlsx',
} = {}) {
  filename = filename || 'excel-list'
  data = [...data]
  data.unshift(header)

  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }

  const ws_name = 'SheetJS'
  const wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data)

  if (merges.length > 0) {
    if (!ws['!merges']) ws['!merges'] = []
    merges.forEach((item) => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }

  if (autoWidth) {
    const colWidth = data.map((row) =>
      row.map((val) => {
        if (val === null) {
          return {
            wch: 10,
          }
        } else if (val.toString().charCodeAt(0) > 255) {
          return {
            wch: val.toString().length * 2,
          }
        } else {
          return {
            wch: val.toString().length,
          }
        }
      })
    )
    const result = colWidth[0]
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j]['wch'] < colWidth[i][j]['wch']) {
          result[j]['wch'] = colWidth[i][j]['wch']
        }
      }
    }
    ws['!cols'] = result
  }

  wb.SheetNames.push(ws_name)
  wb.Sheets[ws_name] = ws

  const wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: 'binary',
  })
  saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream',
    }),
    `${filename}.${bookType}`
  )
}

上面代码中修改默认导出表格的名称

在这里插入图片描述

三、组件中引入使用

<template>
  <div class="select-excel-container">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="filename"  placeholder="请输出导出文件名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleDownload">
          导出选中行
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      border
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" />
      <el-table-column align="center" label="序号" width="55">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="标题">
        <template #default="{ row }">
          {{ row.title }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="作者">
        <template #default="{ row }">
          <el-tag>{{ row.author }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="访问量" width="115">
        <template #default="{ row }">
          {{ row.pageViews }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="时间">
        <template #default="{ row }">
          <span>{{ row.datetime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ExportSelectExcel",
  data() {
    return {
      list: [
        {
          uuid: "3AAD8907-5Efb-9D3F-0219-8f80e67a5634",
          id: "230000198507241209",
          title: "Htqr",
          description: "较无己文日需说事酸热由写来将两市细队。",
          status: "published",
          author: "贺娟",
          datetime: "2010-09-29 07:43:20",
          pageViews: 4179,
          img:
            "https://cdn.jsdelivr.net/gh/chuzhixin/image/table/vab-image-10.jpg",
          switch: true,
          percent: 90,
          rate: 2,
          percentage: 3,
        },
        {
          uuid: "75E17e52-f7f5-CbB0-8DD5-Ef988cbe244D",
          id: "820000202202052027",
          title: "Nfxemhvce",
          description: "集最度达边光设儿就管具七土维对多身。",
          status: "draft",
          author: "郝敏",
          datetime: "1975-03-22 03:21:01",
          pageViews: 3648,
          img:
            "https://cdn.jsdelivr.net/gh/chuzhixin/image/table/vab-image-25.jpg",
          switch: true,
          percent: 85,
          rate: 3,
          percentage: 36,
        },
        {
          uuid: "d2f5cAE8-E1df-9997-918B-4C24cbCDbe82",
          id: "460000199510077216",
          title: "Dcpdyqjxpo",
          description: "都际一这他派效政认治计百这。",
          status: "published",
          author: "乔超",
          datetime: "2011-01-07 17:03:16",
          pageViews: 3799,
          img:
            "https://cdn.jsdelivr.net/gh/chuzhixin/image/table/vab-image-3.jpg",
          switch: true,
          percent: 90,
          rate: 2,
          percentage: 87,
        },
        {
          uuid: "daA2f356-1CAA-9FEA-DaE3-5ED6eFBd794C",
          id: "630000200001199589",
          title: "Hrhhzwj Drtf",
          description: "第使道具所活交克小术表商认么。",
          status: "draft",
          author: "方磊",
          datetime: "1990-03-07 20:29:11",
          pageViews: 3816,
          img:
            "https://cdn.jsdelivr.net/gh/chuzhixin/image/table/vab-image-22.jpg",
          switch: true,
          percent: 90,
          rate: 4,
          percentage: 65,
        },
        {
          uuid: "e989d59B-b2CE-33E9-2dFd-0B6e93EbadEB",
          id: "520000201106102834",
          title: "Kinltlj",
          description: "方西严办政受定每组龙适老看同将。",
          status: "draft",
          author: "罗勇",
          datetime: "1998-06-03 06:10:48",
          pageViews: 322,
          img:
            "https://cdn.jsdelivr.net/gh/chuzhixin/image/table/vab-image-9.jpg",
          switch: false,
          percent: 82,
          rate: 3,
          percentage: 70,
        },
        {
          uuid: "1DE3AEED-AFCC-bbf9-b5E8-C99e303Decdf",
          id: "340000199509093035",
          title: "Nhsfyt Ivuof",
          description: "干导划此世由空单接马发型府头。",
          status: "deleted",
          author: "熊芳",
          datetime: "1997-02-20 01:07:34",
          pageViews: 1068,
          img:
            "https://cdn.jsdelivr.net/gh/chuzhixin/image/table/vab-image-28.jpg",
          switch: false,
          percent: 80,
          rate: 3,
          percentage: 35,
        },
        {
          uuid: "fcE302cF-D71b-dAB6-c2D5-565efE1E8335",
          id: "54000020161030747X",
          title: "Wjomrsvy Gltuchp",
          description: "外改也色入王表件回里把为且得。",
          status: "published",
          author: "卢秀英",
          datetime: "2018-12-16 05:19:06",
          pageViews: 2580,
          img:
            "https://cdn.jsdelivr.net/gh/chuzhixin/image/table/vab-image-10.jpg",
          switch: true,
          percent: 90,
          rate: 3,
          percentage: 90,
        },
        {
          uuid: "8A868c6f-bAf6-A935-FbFC-DEAF2ad3EC3a",
          id: "310000201202123580",
          title: "Frmdpvb",
          description: "般时将写中千该式备重见叫技。",
          status: "deleted",
          author: "孔涛",
          datetime: "2012-10-10 04:59:24",
          pageViews: 1969,
          img:
            "https://cdn.jsdelivr.net/gh/chuzhixin/image/table/vab-image-1.jpg",
          switch: true,
          percent: 87,
          rate: 4,
          percentage: 61,
        },

      ],
      multipleSelection: [],
      downloadLoading: false,
      filename: "",
    };
  },
  created() {
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDownload() {
      if (this.multipleSelection.length) {
        this.downloadLoading = true;
        import("@/utils/excel").then((excel) => {
          const tHeader = ["Id", "Title", "Author", "Readings", "Date","Description"];
          const filterVal = ["id", "title", "author", "pageViews", "datetime","description"];
          const list = this.multipleSelection;
          const data = this.formatJson(filterVal, list);
          console.log(data);
          console.log(list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.filename,
          });
          this.$refs.multipleTable.clearSelection();
          this.downloadLoading = false;
        });
      } else {
        this.$message("请至少选择一行");
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

<style lang="less">
.select-excel-container {
  margin-top: 50px;
}
</style>
导出表格结果如下：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/793598.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

嵌入式开发：单片机嵌入式Linux学习路径

嵌入式开发：单片机嵌入式Linux学习路径

SOC&#xff08;System on a Chip&#xff09;的本质区别在于架构和功能。低端SOC如基于Cortex-M架构的芯片&#xff0c;如STM32和NXP LPC1xxx系列&#xff0c;不具备MMU&#xff08;Memory Management Unit&#xff09;&#xff0c;适用于轻量级实时操作系统如uCOS和FreeRTOS。…
阅读更多...
SOC FPGA之HPS模型设计(一)

SOC FPGA之HPS模型设计(一)

目录 一、建立HPS硬件系统模型 1.1 GHRD 1.2 从0开始搭建HPS 1.2.1 FPGA Interfaces 1.2.1.1 General 1.2.1.2 AXI Bridge 1.2.1.3 FPGA-to-HPS SDRAM Interface 1.2.1.4 DMA Peripheral Request 1.2.1.5 Interrupts 1.2.1.6 EMAC ptp interface 1.2.2 Peripheral P…
阅读更多...
PostMan+Jmeter工具介绍及安装

PostMan+Jmeter工具介绍及安装

目录 一、PostMan介绍​编辑 二、下载安装 三、Postman与Jmeter的区别 一、开发语言区别&#xff1a; 二、使用范围区别&#xff1a; 三、使用区别&#xff1a; 四、Jmeter安装 附一个详细的Jmeter按照新手使用教程&#xff0c;感谢作者&#xff0c;亲测有效。 五、Jme…
阅读更多...
Linux：Linux的发展史和作用有哪些？

Linux：Linux的发展史和作用有哪些？

文章目录 Linux是什么&#xff1f;Linux的开源特征为什么要学习Linux&#xff1f;Linux的应用场景有哪些&#xff1f; Linux是什么&#xff1f; 简单来说&#xff0c;Linux就是操作系统&#xff0c;它和Windows等软件一样&#xff0c;都只是操作系统&#xff0c;并无区别 Linu…
阅读更多...
linux查看系统版本、内存、CPU等信息

linux查看系统版本、内存、CPU等信息

一、查看linux内核版本信息&#xff08;两种方法&#xff09; 1. cat /proc/version linux查看当前操作系统内核版本信息 2. uname -a linux查看当前操作系统内核版本信息 二、查看linux系统版本信息&#xff08;3种方法&#xff09; 1. lsb_release -a 可列出所有版本…
阅读更多...
链表踏歌：独具慧眼，雕琢重复元素藏身匿迹

链表踏歌：独具慧眼，雕琢重复元素藏身匿迹

本篇博客会讲解力扣“83. 删除排序链表中的重复元素”的解题思路&#xff0c;这是题目链接。 由于链表是排好序的&#xff0c;我们可以通过遍历一次链表的方式&#xff0c;删除所有重复的结点。具体来说&#xff0c; 如果链表为空&#xff0c;则不需要删除&#xff0c;直接返回…
阅读更多...
你能说说“淘宝购物车”怎么测试么？

你能说说“淘宝购物车”怎么测试么？

前言 今天我给大家整理一篇面试高频问到的问题“淘宝购物车”怎么测试。 测试思维 依然附上测试任何事物的测试思路&#xff1a; 第一步&#xff1a;梳理产品的核心业务流程&#xff1a;明白这是个什么项目&#xff0c;实现了什么业务&#xff0c;以及是怎么实现的&#xf…
阅读更多...
自动化测试框架unittest与pytest的区别！

自动化测试框架unittest与pytest的区别！

引言 前面文章已经介绍了python单元测试框架&#xff0c;大家平时经常使用的是unittest&#xff0c;因为它比较基础&#xff0c;并且可以进行二次开发&#xff0c;如果你的开发水平很高&#xff0c;集成开发自动化测试平台也是可以的。而这篇文章主要讲unittest与pytest的区别&…
阅读更多...
感染了后缀为.maloxx勒索病毒如何应对？数据能够恢复吗？

感染了后缀为.maloxx勒索病毒如何应对？数据能够恢复吗？

引言&#xff1a; 网络安全威胁不断进化&#xff0c;勒索病毒作为其中一种恶意软件类型&#xff0c;给个人用户和企业带来了严重的数据安全问题。.maloxx勒索病毒&#xff08;maloxx Ransomware&#xff09;是最近出现的一种恶意软件&#xff0c;它能够加密受害者计算机中的数…
阅读更多...
建筑设计项目管理系统推荐：哪个最适合您的业务？

建筑设计项目管理系统推荐：哪个最适合您的业务？

建筑设计用什么项目管理系统好&#xff1f;Zoho Projects设计行业一体化解决方案适用于以建筑设计、景观规划、勘探设计、室内设计、灯光设计、幕墙设计、工业设计、品牌设计、平面设计为主要业务的设计公司、广告公司、建筑设计院等设计机构。围绕设计行业的核心业务需求&…
阅读更多...
媒体查询做页面的响应式布局@media

媒体查询做页面的响应式布局@media

媒体查询(media)_花束javascipt的博客-CSDN博客
阅读更多...
[JavaScript游戏开发] 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测

[JavaScript游戏开发] 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测

系列文章目录 第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 第三章 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测 文章目录 系列文章目录前言一、本章节效果图二、介绍2.1、准备地图素材2.2、封装地图上…
阅读更多...
GUI自动化测试进阶：页面对象模式

GUI自动化测试进阶：页面对象模式

本文介绍的是页面对象设计模式及其常见的滥用继承的错误。 本文和语言无关&#xff0c;但作者主要使用python和java。本文假设读者已经具有了一定的python或java基础&#xff0c;知道类和方法是什么。 如果完全没有这方面的基础&#xff0c;请看我的《测试人员如何学Python》。…
阅读更多...
TPS54620RHLR是一款同步降压转换器

TPS54620RHLR是一款同步降压转换器

TPS54620RHLR是一款同步降压转换器&#xff0c;通过高效率和集成高压侧和低压侧MOSFET&#xff0c;为小型设计进行了优化。通过电流模式控制实现了进一步的空间节省&#xff0c;从而减少了元件数量&#xff0c;并通过选择高开关频率&#xff0c;减少了电感器的占地面积。输出电…
阅读更多...
Redis源码篇 - QuickList数据结构

Redis源码篇 - QuickList数据结构

Quicklist是Redis3.2之后引入的一个双向链表结构&#xff0c;其本质是对ziplist弊端的一个优化数据结构&#xff0c;ziplist是一种连续的内存空间&#xff0c;用于减少碎片化&#xff0c;减少内存占用&#xff0c;但是正是因为需要连续的内存空间&#xff0c;当数量越来越大时&…
阅读更多...
023 - group by

023 - group by

GROUP BY语句将具有相同值的行分组到汇总行中 GROUP BY语句通常与聚合函数&#xff08;COUNT&#xff0c;MAX&#xff0c;MIN&#xff0c;SUM&#xff0c;AVG&#xff09;一起使用&#xff0c;将结果集分组为一列或多列。 SQL GROUP BY 语法 SELECT column_name(s) FROM tabl…
阅读更多...
antd中的Cascader级联选择框怎么清空重置React

antd中的Cascader级联选择框怎么清空重置React

项目场景&#xff1a; React项目&#xff0c;使用antd中的Cascader级联选择框 问题描述&#xff1a; 通过其他按钮无法重置选择框中的项 原因分析&#xff1a;&#xff08;对应解决办法一和二&#xff09; 1、级联选择框的数据默认是根据options绑定的数组中的value值来进行…
阅读更多...
Audio Clip

Audio Clip

Unity支持的音频格式&#xff1a; aiff/wav&#xff1a;适用于较短声音片段 mp3/OGG:适用于较长的音乐片段 多声道强制转为单声道&#xff0c;减小所占内存。 勾选后会对声音有优化 在后台加载声音 Load Type&#xff1a; 第一个&#xff0c;以不压缩的形式存在内存&#…
阅读更多...
idea插件开发-自定义语言02-Lexer

idea插件开发-自定义语言02-Lexer

词法分析器或词法分析器定义文件内容如何分解为标记。词法分析器是自定义语言插件几乎所有功能的基础&#xff0c;比如基本语法突出显示到高级代码分析功能。由Lexer来定义。IDE在三个主要上下文中调用词法分析器&#xff0c;插件可以根据需要提供不同的词法分析器实现&#xf…
阅读更多...
中南大学硕士论文latex版本全指导

中南大学硕士论文latex版本全指导

要毕业了&#xff0c;闲下点时间写的东西。之前一直收益与师兄师姐流传下来的latex版本&#xff0c;用起来很舒服&#xff0c;希望后面的学弟学妹也能完美用上。latex功能很强大&#xff0c;不需要自己排版&#xff0c;只管内容即可&#xff0c;但是安装流程会多一丢丢。 目录 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023