给我实现一个前端的 Excel 导入和导出功能(二)

简介: 给我实现一个前端的 Excel 导入和导出功能

JSON 导出为 Excel

基本结构

页面内容也非常简单,具体如下:

image.png

<template>
  <div id="container">
    <h1>JSON 数据:</h1>
    <h2>
      <code>
        {{ jsonData }}
      </code>
    </h2>
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>
复制代码

导出功能

导出其实也很简单,首先创建 src/utils/json2Excel.ts 文件里面就是具体导出的实现,具体内容如下:

// src/utils/json2Excel.ts
import * as XLSX from "xlsx";
export default (
  data: any[],
  sheetName: string = "sheet1",
  fileName: string = "json2Excel.xlsx"
) => {
  const jsonWorkSheet = XLSX.utils.json_to_sheet(data);
  const workBook = {
    SheetNames: [sheetName], // 指定有序 sheet 的 name
    Sheets: {
      [sheetName]: jsonWorkSheet, // 表格数据内容
    },
  };
  return XLSX.writeFile(workBook, fileName); // 向文件系统写出文件
};
复制代码

然后在 App.vue 中使用,具体如下:

// src/App.vue
<script setup lang="ts">
import json2Excel from "./utils/json2Excel";
// 测试的 JSON 数据
const jsonData = [
  {
    name: "张三1",
    age: 18,
    skill: "干饭1",
    telephone: 20200825,
    address: "宇宙尽头1",
  },
  {
    name: "张三2",
    age: 19,
    skill: "干饭2",
    telephone: 20200826,
    address: "宇宙尽头2",
  },
  {
    name: "张三3",
    age: 20,
    skill: "干饭3",
    telephone: 20200827,
    address: "宇宙尽头3",
  },
  {
    name: "张三4",
    age: 21,
    skill: "干饭4",
    telephone: 20200828,
    address: "宇宙尽头4",
  },
  {
    name: "张三5",
    age: 22,
    skill: "干饭5",
    telephone: 20200829,
    address: "宇宙尽头5",
  },
  {
    name: "张三6",
    age: 23,
    skill: "干饭6",
    telephone: 20200830,
    address: "宇宙尽头6",
  },
  {
    name: "张三7",
    age: 24,
    skill: "干饭7",
    telephone: 20200831,
    address: "宇宙尽头7",
  },
  {
    name: "张三8",
    age: 25,
    skill: "干饭8",
    telephone: 20200832,
    address: "宇宙尽头8",
  },
  {
    name: "张三9",
    age: 26,
    skill: "干饭9",
    telephone: 20200833,
    address: "宇宙尽头9",
  },
  {
    name: "张三10",
    age: 27,
    skill: "干饭10",
    telephone: 20200834,
    address: "宇宙尽头10",
  },
];
// key -> name 的映射
const excelKeyToName = {
  name: "姓名",
  age: "年龄",
  skill: "特长",
  telephone: "电话",
  address: "地址",
};
// 导出 Excel 文件
const exportExcel = () => {
  // 格式化参数
  const data = jsonData.map((item) => {
    const newItem: any = {};
    Object.keys(item).forEach(key => {
      newItem[excelKeyToName[key]] = item[key];
    });
    return newItem;
  });
  // 导出 Excel
  json2Excel(data);
};
</script>
复制代码

效果演示

image.png

最后

以上只是实现了简单的单个导入、导出功能,可以将其完善为 批量操作,但是要注意批量操作带来的耗时性,将对应的耗时部分通过 webworker 等方式处理,这样页面就不需要一直等待当前的操作完成。

另外,如果有要求在导出 Excel 时有表格样式(如:行列宽高设置等)可以通过 xlsx-populate 来实现。

以上就是本文的全部内容,希望上述内容可以给大家带来一些思路,可以在评论区贡献更优质的方案。


目录
相关文章
|
2月前
|
Python
Excel中如何批量重命名工作表与将每个工作表导出到单独Excel文件
本文介绍了如何在Excel中使用VBA批量重命名工作表、根据单元格内容修改颜色,以及将工作表导出为独立文件的方法。同时提供了Python实现导出工作表的代码示例,适用于自动化处理Excel文档。
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
289 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
2031 64
|
7月前
|
文字识别 BI
【图片型PDF】批量识别扫描件PDF指定区域局部位置内容,将识别内容导出Excel表格或批量改名文件,基于阿里云OCR对图片型PDF识别改名案例实现
在医疗和政务等领域,图片型PDF文件(如病历、报告、公文扫描件)的处理需求广泛。通过OCR技术识别这些文件中的文字信息,提取关键内容并保存为表格,极大提高了信息管理和利用效率。本文介绍一款工具——咕嘎批量OCR系统,帮助用户快速处理图片型PDF文件,支持区域识别、内容提取、导出表格及批量改名等功能。下载工具后,按步骤选择处理模式、进行区域采样、批量处理文件,几分钟内即可高效完成数百个文件的处理。
791 8
|
9月前
|
存储 Java easyexcel
招行面试:100万级别数据的Excel,如何秒级导入到数据库?
本文由40岁老架构师尼恩撰写,分享了应对招商银行Java后端面试绝命12题的经验。文章详细介绍了如何通过系统化准备,在面试中展示强大的技术实力。针对百万级数据的Excel导入难题,尼恩推荐使用阿里巴巴开源的EasyExcel框架,并结合高性能分片读取、Disruptor队列缓冲和高并发批量写入的架构方案,实现高效的数据处理。此外,文章还提供了完整的代码示例和配置说明,帮助读者快速掌握相关技能。建议读者参考《尼恩Java面试宝典PDF》进行系统化刷题,提升面试竞争力。关注公众号【技术自由圈】可获取更多技术资源和指导。
|
9月前
|
数据可视化 数据处理 Python
使用Pandas实现Excel中的数据透视表功能
本文介绍了如何使用Python的Pandas库实现Excel中的数据透视表功能,包括环境准备、创建模拟销售数据、代码实现及输出等步骤。通过具体示例展示了按地区和销售员汇总销售额的不同方法,如求和、平均值、最大值等,帮助读者掌握Pandas在数据处理上的强大能力。
300 12
|
10月前
|
数据格式 UED
记录一次NPOI库导出Excel遇到的小问题解决方案
【11月更文挑战第16天】本文记录了使用 NPOI 库导出 Excel 过程中遇到的三个主要问题及其解决方案:单元格数据格式错误、日期格式不正确以及合并单元格边框缺失。通过自定义单元格样式、设置数据格式和手动添加边框,有效解决了这些问题,提升了导出文件的质量和用户体验。
783 3
|
10月前
|
前端开发
实现Excel文件和其他文件导出为压缩包,并导入
实现Excel文件和其他文件导出为压缩包,并导入
195 1
|
10月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
483 4
|
10月前
|
Java API Apache