【vue】JSON数据导出excel

news/2024/7/8 12:12:30 标签: vue.js, json, excel

前言
导出方式有很多种,但是若只需要数据导出成.xlsx文件并下载的话,只用xlsx一个插件就行
目标

1 实现数据导出excel
2 如何设置表格列宽
3 如何在文件中创建工作表


准备工作

1 安装

npm i xlsx -S

2 引入

npm i xlsx -S

excel_13">二、导出excel

创建文件

const wb = XLSX.utils.book_new(); // 创建文件

将数据和表头转换为工作表

const ws = XLSX.utils.aoa_to_sheet([header,...list||[]]); 

创建工作表,并将数据和表头填充到工作表中

XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 工作表名Sheet

写入文件并设置文件名

XLSX.writeFile(wb, bookTitle + ".xlsx", { bookType: "xlsx",type: "buffer"}); // 保存为Excel文件

AOA方式导出

    exportAOAToExcel() {
       // 表中数据
        const list = [
          ["2016-05-03", "Tom", "No. 189, Grove St, Los Angeles"],
          ["2016-05-03", "1", "No. 189, Grove St, Los Angeles"],
          ["2016-05-03", "2", "No. 189, Grove St, Los Angeles"],
          ["2016-05-03", "3", "No. 189, Grove St, Los Angeles"],
        ];
        const header = ["日期", "姓名", "地址"]; // 自定义的表头数组
        const wb = XLSX.utils.book_new(); // 创建文件
        const ws = XLSX.utils.aoa_to_sheet([header,...list||[]]); // 将数据和表头转换为工作表
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 工作表Sheet1
        XLSX.writeFile(wb , Date.now()+".xlsx", { bookType: "xlsx", type: "buffer" }); // 保存为Excel文件
    },

JSON方式导出

 exportJSONToExcel(){
        const list = [
            {date:'2016-05-03',name:'1',address:'No. 1, Grove St, Los Angeles'},
            {date:'2016-05-03',name:'2',address:'No. 2, Grove St, Los Angeles'},
            {date:'2016-05-03',name:'3',address:'No. 3, Grove St, Los Angeles'},
            {date:'2016-05-03',name:'4',address:'No. 4, Grove St, Los Angeles'},
        ];
        const header = ["日期", "姓名", "地址"]; // 自定义的表头数组
        const dataForExcel = list.map((item) => ({
          '日期': item.date,
        '姓名': item.name,
          '地址': item.address,
        }));
        const wb = XLSX.utils.book_new();
        const ws = XLSX.utils.json_to_sheet(dataForExcel, {header: header}); // 将数据和表头转换为工作表
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        XLSX.writeFile(wb,Date.now()  +".xlsx", { bookType: "xlsx", type: "buffer" }); // 保存为Excel文件
    }

效果在这里插入图片描述
实现一个文件中两个工作表,列表的宽度固定,文件的名称


    exportToExcel(header, list, title, sheet, wch) {
      const bookTitle =
        title ||
        this.getCurrentTime(1)
          .replace(/-/g, "")
          .replace(/:/g, "")
          .replace(" ", "");
      const wb = XLSX.utils.book_new();
      sheet.forEach((item, index) => {
        const ws = XLSX.utils.aoa_to_sheet([header, ...(list[index] || [])]); // 将数据和表头转换为工作表
        if (wch.length > 0) {
          ws["!cols"] = wch; // 设置列宽
        //   ws["!cols"] = ws["!cols"];
        }
        XLSX.utils.book_append_sheet(wb, ws, item || "Sheet1");
      });
      XLSX.writeFile(wb, bookTitle + ".xlsx", {
        bookType: "xlsx",
        type: "buffer",
      }); // 保存为Excel文件
    },
    exportSheet() {
      const header = ["姓名", "年龄"];
      const list = [
        [
          ["张三", 24],
          ["李四", 24],
        ],
        [
          ["王五", 24],
          ["李四", 24],
        ],
      ];
      const wch = [{ wch: 10 }, { wch: 30}]; // 设置列宽
      const sheet = ["一班", "二班"];
      const title = "学校";
      this.exportToExcel(header, list, title, sheet, wch);
    },

在这里插入图片描述


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

相关文章

如何计算弧线弹道的落地位置

1)如何计算弧线弹道的落地位置 2)Unity 2021 IL2CPP下使用Protobuf-net序列化报异常 3)编译问题,用Mono可以,但用IL2CPP就报错 4)Wwise的Bank在安卓上LoadBank之后,播放没有声音 这是第393篇UWA…

上海市计算机学会竞赛平台2023年2月月赛丙组平分数字(一)

题目描述 给定 𝑛n 个整数:𝑎1,𝑎2,⋯ ,𝑎𝑛a1​,a2​,⋯,an​,请判定能否将它们分成两个部分(不得丢弃任何数字),每部分的数字之和一样大。 输入格式 第…

IPsec连接 和 SSL连接

Psec和SSL连接是两种用于保障网络通信安全的技术 IPsec 通常用于连通两个局域网,主要是网对网的连接,如分支机构与总部之间,或者本地IDC与云端VPC的子网连接。适合站点间的稳定通讯需求以及对网络层安全有严格要求的场合。要求两端有固定的网…

chrome浏览器打开控制台很慢解决办法

问题:谷歌浏览器右键或者f12打开控制台速度很慢,需要等个几秒 解决: 设置成english(us)即可

期末C语言易错知识点整理

1.在定义多维数组时,除了最左边的维度,其余的维度必须明确指定大小 2.int m[1][4]{4}; 定义的是一个 1 行 4 列的二维数组,初始化时提供了一个元素 4,其余元素默认初始化为 0,因此是正确的。 3.二维数组 a[3][6] 中的索…

Python | Leetcode Python题解之第213题打家劫舍II

题目: 题解: class Solution:def rob(self, nums: List[int]) -> int:def robRange(start: int, end: int) -> int:first nums[start]second max(nums[start], nums[start 1])for i in range(start 2, end 1):first, second second, max(fi…

【LeetCode】反转字符串中的单词

目录 一、题目二、解法完整代码 一、题目 给你一个字符串 s ,请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意&#xff1…

PMP--知识卡片--波士顿矩阵

文章目录 记忆黑话概念作用图示 记忆 一说到波士顿就联想到波士顿龙虾,所以波士顿矩阵跟动物有关,狗,牛。 黑话 你公司的现金牛业务,正在逐渐变成瘦狗,应尽快采取收割策略;问题业务的储备太少&#xff0…