vue表格列表导出excel

news/2024/7/21 3:55:54 标签: vue.js, excel, javascript

你可以通过下面的步骤使用Vue导出Excel表格:

  1. 安装依赖 安装两个依赖包:
npm install --save xlsx file-saver

  1. 创建Excel导出方法
//导出 Excel
exportExcel() {
  // 表格数据
  let data = this.tableData;
  // 转化为工作簿对象
  const workbook = XLSX.utils.book_new();
  // 表头
  const header = [
    '姓名',
    '年龄',
    '性别',
  ];
  // 表头对应的键名
  const keys = [
    'name',
    'age',
    'gender',
  ];
  // 表格数据处理
  const arr = [];
  data.forEach(item => {
    const obj = {};
    keys.forEach(key => {
      obj[key] = item[key];
    });
    arr.push(obj);
  });
  // 创建工作表
  const worksheet = XLSX.utils.json_to_sheet(arr, { header });
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 导出 Excel
  XLSX.writeFile(workbook, 'table.xlsx');
}

  1. 创建导出Excel的按钮
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
        </tr>
      </tbody>
    </table>
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

现在你就可以导出Excel表格了。


http://www.niftyadmin.cn/n/5128752.html

相关文章

MySQL数据库#6

Python操作mysql 在使用Python连接mysql之前我们需要先下载一个第三方的模块 pymysql的模块&#xff0c;导入后再进行操作。 操作步骤&#xff1a;1. 先连接mysql host&#xff0c;port&#xff0c;charset&#xff0c;username password 库&#xff0c;等等。 import pymysql…

【1++的Linux】之进程间通信(共享内存)

&#x1f44d;作者主页&#xff1a;进击的1 &#x1f929; 专栏链接&#xff1a;【1的Linux】 我们在前面的文章中提到过&#xff0c;进程间的通信本质都是先看到同一块资源&#xff0c;然后通过这同一块资源进行通信&#xff0c;并且是单向的通信&#xff0c;只能一端发&#…

数据结构与算法之排序: 选择排序 (Javascript版)

排序 排序&#xff1a;把某个乱序的数组变成升序或降序的数组 (这里用数组来做举例) 选择排序 该排序属于 贪心 策略关注的是局部&#xff0c;是一种苟且的东西 算法实现 // 随机数组&#xff0c;选择排序 Array.prototype.selectionSort function() {let len this.leng…

使用Terraform管理已经存在的kubernates和默认的节点池

背景&#xff1a; 通过terraform resource "alicloud_cs_managed_kubernetes" "k8s" {...}创建集群时&#xff0c;会产生一个默认的节点池default-nodepool&#xff0c;但是如何去修改这个默认节点池的信息呢&#xff1f; 解决思路&#xff1a; 因为Ter…

RSAUtil 前端 JavaScript JSEncrypt 实现 RSA (长文本)加密解密

文章归档&#xff1a;https://www.yuque.com/u27599042/coding_star/cl4dl599pdmtllw1 依赖 import JSEncrypt from ‘jsencrypt’ pnpm i jsencryptimport {stringIsNull} from “/utils/string_utils.js”&#xff1a;https://www.yuque.com/u27599042/coding_star/slncupw…

为什么公司需要公关软文?媒介盒子为您解答

公关软文指企业通过软文达到公关目的的新型营销方式&#xff0c;成熟企业都会设立公关部来树立企业形象&#xff0c;传达企业价值观等&#xff0c;今天媒介盒子就来和大家聊聊&#xff0c;为什么公司需要公关软文&#xff1f;公关软文的营销价值在哪儿&#xff1f; 一、 公关软…

计算机网络【CN】介质访问控制

信道划分介质访问控制 FDMTDMWDMCDM【掌握eg即可】 随机介质访问控制 CSMA 1-坚持CSMA 非坚持CSMA p-坚持CSMA 空闲时 立即发送数据 立即发送数据 以概率P发送数据&#xff0c;以概率1-p推迟到下一个时隙 忙碌时 继续坚持侦听 放弃侦听&#xff0c;等待一个随机的时…

bootstap_小项目

通过bootstrap画一个简单的后台管理页面&#xff0c;知识有限&#xff0c;页面粗糙&#xff0c;一种记录方式 页面效果展示 首页页面代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible&qu…