vue3 + antd vue 纯前端 基于xlsx 实现导入excel 转 json，将json数据转换XLSX导出（模版下载）

原创 已于 2025-04-02 14:19:15 修改 · 889 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #excel

于 2024-07-19 15:58:27 首次发布

个人博客（纯手戳 vue3 + nodejs + mysql ）http://snows-l.sitehttp://snows-l.site

一、导入

0、关键代码

// 安装插件
npm i xlsx/yarn add xlsx
// 导入xlsx
import * as XLSX from 'xlsx';

点击提交的时候才整理数据。上传的时候文件保存在  state.form.file[0] 中的

// 定义字段映射关系
const fieldMap = {
  sheet2json: {
    技能名称: 'skill_name',
    技能等级: 'skill_level',
    技能描述: 'skill_desc',
    技能类型: 'skill_type',
    技能效果: 'skill_effect',
    技能消耗: 'skill_cost',
    技能持续时间: 'skill_duration',
    技能范围: 'skill_range',
    技能范围: 'skill_range',
    技能目标: 'skill_target'
  }
};

// 提交 --- 点击提交的时候才整理数据。上传的时候文件保存的  state.form.file[0] 中的
const handleSummit = () => {
  formRef.value.validate().then(async () => {
    try {
      const data = await state.form.file[0].arrayBuffer(); // 使用 arrayBuffer 避免中文乱码
      const workbook = XLSX.read(data, { type: 'buffer' });
      const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);

      // 映射字段名并过滤掉不符合预期的数据
      const mappedData = outdata
        .map(row => {
          return Object.keys(row).reduce((targetMap, key) => {
            const mappedKey = fieldMap.sheet2json[key];
            if (mappedKey) {
              targetMap[mappedKey] = row[key];
            }
            return targetMap;
          }, {});
        })
        .filter(item => Object.keys(item).length > 0); // 过滤空对象

      console.log('------- 导入的数据 -------', mappedData);

      emits('submit', mappedData);
      handleClose();
    } catch (error) {}
  });
};

1、template

<a-form :model="state.form" name="form" ref="formRef" :label-col="{ style: { width: '120px' } }" autocomplete="off" :rules="rules">
  <a-form-item label="导入文件上传" name="file" :rules="rules.file">
    <div class="file-warp" style="position: relative">
      <a-upload
        style="margin-left: 20px"
        :file-list="state.form.file"
        name="file"
        :customRequest="upload"
        :beforeUpload="beforeUpload"
        @remove="handleRemove"
        accept=".xlsx, .xls">
        <a-button type="primary">
          <upload-outlined></upload-outlined>
          上传文件
        </a-button>
      </a-upload>
      <a-button type="primary" ghost style="position: absolute; top: 0; left: 150px" @click="handleDownload">
        <VerticalAlignBottomOutlined></VerticalAlignBottomOutlined>
        模版下载
      </a-button>
    </div>
  </a-form-item>
</a-form>

2、script

import * as XLSX from 'xlsx';
import { reactive, ref } from 'vue';

const state = reactive({
  form: {
    file: []
  }
});
const formRef = ref(null);
const open = ref(true);

const rules = {
  file: [{ required: true, message: '请选择文件', trigger: ['blur', 'change'] }]
};

// 定义字段映射关系
const fieldMap = {
  sheet2json: {
    技能名称: 'skill_name',
    技能等级: 'skill_level',
    技能描述: 'skill_desc',
    技能类型: 'skill_type',
    技能效果: 'skill_effect',
    技能消耗: 'skill_cost',
    技能持续时间: 'skill_duration',
    技能范围: 'skill_range',
    技能范围: 'skill_range',
    技能目标: 'skill_target'
  },
  json2sheet: {
    skill_name: '技能名称',
    skill_level: '技能等级',
    skill_desc: '技能描述',
    skill_type: '技能类型',
    skill_effect: '技能效果',
    skill_cost: '技能消耗',
    skill_duration: '技能持续时间',
    skill_range: '技能范围',
    skill_target: '技能目标'
  }
};

// 上传文件之前检测
const beforeUpload = file => {
  const isXlsxOrXls = file.name.split('.')[1] == 'xlsx' || file.name.split('.')[1] == 'xls';
  if (!isXlsxOrXls) {
    message.error('只允许上传xlsx, xls格式的文件！');
    return false;
  }
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('文件不得大于10MB!');
    return false;
  }
  return isXlsxOrXls && isLt10M;
};

// 选择文件
const upload = file => {
  // 原本调用接口上传的
  // uplaodFile(file.file).then(res => {
  //   fileList.value.push({ name: res.data.originalFilename, url: viteConfig.baseUrl + res.data.fileName, fileUrl: res.data.fileName });
  //   formRef.value.clearValidate();
  // });
  state.form.file = [file.file];
  formRef.value.clearValidate();
};

// 移除文件
const handleRemove = file => {
  state.form.file = [];
};

// 提交 转换数据
const handleSummit = () => {
  formRef.value.validate().then(async () => {
    try {
      const data = await state.form.file[0].arrayBuffer(); // 使用 arrayBuffer 避免中文乱码
      const workbook = XLSX.read(data, { type: 'buffer' });
      const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);

      // 映射字段名并过滤掉不符合预期的数据
      const mappedData = outdata
        .map(row => {
          return Object.keys(row).reduce((targetMap, key) => {
            const mappedKey = fieldMap.sheet2json[key];
            if (mappedKey) {
              targetMap[mappedKey] = row[key];
            }
            return targetMap;
          }, {});
        })
        .filter(item => Object.keys(item).length > 0); // 过滤空对象

      console.log('------- 导入的数据 -------', mappedData);

      emits('submit', mappedData);
      handleClose();
    } catch (error) {}
  });
};

二、模板下载

1、script

// 定义字段映射关系
const fieldMap = {
  json2sheet: {
    skill_name: '技能名称',
    skill_level: '技能等级',
    skill_desc: '技能描述',
    skill_type: '技能类型',
    skill_effect: '技能效果',
    skill_cost: '技能消耗',
    skill_duration: '技能持续时间',
    skill_range: '技能范围',
    skill_target: '技能目标'
  }
};

// 模板数据
let templateData = [
  {
    skill_name: '大刀斩',
    skill_level: '5',
    skill_desc: '技能描述',
    skill_type: '大招',
    skill_effect: '亚瑟王那样的大招',
    skill_cost: '10000',
    skill_duration: '10',
    skill_range: '500',
    skill_target: '目标：亚瑟王'
  }
];

// 模版下载
const handleDownload = () => {
  // 映射字段名并过滤掉不符合预期的数据
  const list = templateData
    .map(row => {
      return Object.keys(row).reduce((targetMap, key) => {
        const mappedKey = fieldMap.json2sheet[key];
        if (mappedKey) {
          targetMap[mappedKey] = row[key];
        }
        return targetMap;
      }, {});
    })
    .filter(item => Object.keys(item).length > 0); // 过滤空对象;

  const workSheet = XLSX.utils.json_to_sheet(list);
  const workBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workBook, workSheet, '技能表');

  // 生成Excel文件并下载
  XLSX.writeFile(workBook, '技能表模板.xlsx');
};

三、完整的文件

<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-07-18 14:46:47
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2024-07-19 15:51:19
 * @FilePath: /digital-qiankun-you/cmdb/src/pages/ipSource/components/uploadFile.vue
-->
<template>
  <div class="upeate-field-warp">
    <a-modal width="800px" v-model:open="open" :z-index="10004" centered :title="'规划导入'">
      <template #footer>
        <a-button type="primary" @click="handleSummit">确认</a-button>
      </template>
      <div class="update-field-content-warp">
        <a-form :model="state.form" name="form" ref="formRef" :label-col="{ style: { width: '120px' } }" autocomplete="off" :rules="rules">
          <a-form-item label="导入文件上传" name="file" :rules="rules.file">
            <div class="file-warp" style="position: relative">
              <a-upload
                style="margin-left: 20px"
                :file-list="state.form.file"
                name="file"
                :customRequest="upload"
                :beforeUpload="beforeUpload"
                @remove="handleRemove"
                accept=".xlsx, .xls">
                <a-button type="primary">
                  <upload-outlined></upload-outlined>
                  上传文件
                </a-button>
              </a-upload>
              <a-button type="primary" ghost style="position: absolute; top: 0; left: 150px" @click="handleDownload">
                <VerticalAlignBottomOutlined></VerticalAlignBottomOutlined>
                模版下载
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { UploadOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons-vue';
import { reactive, ref } from 'vue';
import * as XLSX from 'xlsx';

const emits = defineEmits(['submit']);

const state = reactive({
  form: {
    file: []
  }
});
const formRef = ref(null);
const open = ref(true);

const rules = {
  file: [{ required: true, message: '请选择文件', trigger: ['blur', 'change'] }]
};

// 上传文件之前检测
const beforeUpload = file => {
  const isXlsxOrXls = file.name.split('.')[1] == 'xlsx' || file.name.split('.')[1] == 'xls';
  if (!isXlsxOrXls) {
    message.error('只允许上传xlsx, xls格式的文件！');
    return false;
  }
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('文件不得大于10MB!');
    return false;
  }
  return isXlsxOrXls && isLt10M;
};

// 选择文件
const upload = file => {
  // 原本调用接口上传的
  // uplaodFile(file.file).then(res => {
  //   fileList.value.push({ name: res.data.originalFilename, url: viteConfig.baseUrl + res.data.fileName, fileUrl: res.data.fileName });
  //   formRef.value.clearValidate();
  // });
  state.form.file = [file.file];
  formRef.value.clearValidate();
};

// 移除文件
const handleRemove = file => {
  state.form.file = [];
};

// 初始化
const init = () => {
  open.value = true;
};

// 关闭
const handleClose = () => {
  open.value = false;
};

// 定义字段映射关系
const fieldMap = {
  sheet2json: {
    技能名称: 'skill_name',
    技能等级: 'skill_level',
    技能描述: 'skill_desc',
    技能类型: 'skill_type',
    技能效果: 'skill_effect',
    技能消耗: 'skill_cost',
    技能持续时间: 'skill_duration',
    技能范围: 'skill_range',
    技能范围: 'skill_range',
    技能目标: 'skill_target'
  },
  json2sheet: {
    skill_name: '技能名称',
    skill_level: '技能等级',
    skill_desc: '技能描述',
    skill_type: '技能类型',
    skill_effect: '技能效果',
    skill_cost: '技能消耗',
    skill_duration: '技能持续时间',
    skill_range: '技能范围',
    skill_target: '技能目标'
  }
};

// 模板数据
let templateData = [
  {
    skill_name: '大刀斩',
    skill_level: '5',
    skill_desc: '技能描述',
    skill_type: '大招',
    skill_effect: '亚瑟王那样的大招',
    skill_cost: '10000',
    skill_duration: '10',
    skill_range: '500',
    skill_target: '目标：亚瑟王'
  }
];

// 提交
const handleSummit = () => {
  formRef.value.validate().then(async () => {
    try {
      const data = await state.form.file[0].arrayBuffer(); // 使用 arrayBuffer 避免中文乱码
      const workbook = XLSX.read(data, { type: 'buffer' });
      const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);

      // 映射字段名并过滤掉不符合预期的数据
      const mappedData = outdata
        .map(row => {
          return Object.keys(row).reduce((targetMap, key) => {
            const mappedKey = fieldMap.sheet2json[key];
            if (mappedKey) {
              targetMap[mappedKey] = row[key];
            }
            return targetMap;
          }, {});
        })
        .filter(item => Object.keys(item).length > 0); // 过滤空对象

      console.log('------- 导入的数据 -------', mappedData);

      emits('submit', mappedData);
      handleClose();
    } catch (error) {}
  });
};

// 模版下载
const handleDownload = () => {
  // 映射字段名并过滤掉不符合预期的数据
  const list = templateData
    .map(row => {
      return Object.keys(row).reduce((targetMap, key) => {
        const mappedKey = fieldMap.json2sheet[key];
        if (mappedKey) {
          targetMap[mappedKey] = row[key];
        }
        return targetMap;
      }, {});
    })
    .filter(item => Object.keys(item).length > 0); // 过滤空对象;

  const workSheet = XLSX.utils.json_to_sheet(list);
  const workBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workBook, workSheet, '技能表');
  // 生成Excel文件并下载
  XLSX.writeFile(workBook, '技能表模板.xlsx');
};

defineExpose({
  init
});
</script>

<style lang="less" scoped>
.upeate-field-warp {
  width: 100%;
}
</style>

<style lang="less">
.update-field-content-warp {
  padding: 40px 20px;
  .field-item {
    display: flex;
    align-items: center;
    label {
      min-width: 80px;
    }
  }
}
</style>

四、效果图：

原数据（图1）

导入组件（图2）

导出整理后的数据（图3）

模板下载（图4）

模板下载之后的文件（图5）

vue3，vue3 实现前端下载 xlsx；file-saver
jieweiwujie的博客
03-18 827
主要是将el-table的数据或者数组其他形式的数据下载为excel文件。
Vue3 - 详细实现将复杂 table 表格导出到 Excel(xls) 文件，支持原生表格、Element Plus 复杂表格、Ant Design Vue 复杂表格（将前端表格“所见所得“导出）
资深程序员
02-21 4017
vue3，excel，xls，电子表格，antdesignvue，elementplus，table表格导出，vue3导出复杂表格，表格很复杂用什么办法能导出为xls文件，纯前端导出，所见所得导出表格，vue3表格很多合并行和列怎么导出成excel，复杂表格多行多列合并的导出，Vue导出复杂excel表格，将网页上的表格原封不动的导出成excel，vue3如何将组件库的表格导出excel，vue将页面上的表格导出，实现导出表格并合并单元格，vue+element表格导出为Excel文件，无法导出很复杂
纯前端html+js实现的excel转json格式
02-28
纯html+js实现，无需服务端。 可用于管理后台简单的批量导入数据到后台。 支持将excel表格中的数据直接转化成json格式化
Vue导入Excel文件并转换为JSON数据
m0_62022586的博客
05-19 1811
【代码】Vue导入Excel文件并转换为JSON数据。
前端excel表格解析为json，并模仿excel显示
最新发布
qq_21113235的博客
05-21 438
本文介绍了一个基于Vue2和ElementUI的前端项目，主要功能是模拟Excel表格的样式和操作。项目通过<style lang="scss" scoped>实现样式隔离，使用<el-upload>组件实现文件上传功能，支持导入Excel文件并解析为JSON数据。表格的首行和首列会根据数据内容自动生成坐标，类似于Excel的字母和数字坐标。表格中的单元格支持点击选中，并可以编辑内容。项目还提供了handleFileUpload方法，用于解析上传的Excel文件，
electron+vue3实现excel表格转JSON文件
weixin_50307964的博客
02-07 805
Excel表格转JSON文件可能在工作中这个需求比较少见（我没遇到过），这边短时间我不是做了一个JSON转Excel表格嘛？我就在想返过来可以嘛，然后就去查了一下在node关键中可以直接读取Excel文件并且返回一个数组，这样不就行了吗？开始干吧！哈哈哈哈。
超简单的excel表导入成Json数据方法--VUE项目（xlsx.js）
weixin_42966151的博客
12-17 4362
超简单的excel表导入成Json数据方法--VUE项目（xlsx.js）
xlsx导入成--json
Kevin0371的博客
03-16 249
这两天遇到大难题了，就是这个 xlsx 导入问题，之前用的xlsx.full.min.js，写的导入，结果不兼容ie浏览器，研究这个也好长时间，网上居然还没有搜到合适的，自己写从xlsx官网上找了个大例子，改了改， 在引入 shim.js jszip.js xlsx.js 的基础上 上代码： var X =...
Vue结合后台导入导出Excel问题详解
10-17
在Vue.js开发中，实现Excel的导入导出功能是一项常见的需求。本文将深入探讨如何在Vue项目中结合后台服务实现这一功能，特别是针对导出Excel的实现方式。 首先，我们来看一下导出Excel的核心概念。在Java后端，通常...
springboot+vue3+antdesignvue实现文件的导入导出javaguns框架
2301_76604664的博客
01-16 846
它接收一个文件作为参数，调用服务类的方法来处理文件导入操作，并将结果封装在响应数据中返回。注解来定义一个POST请求的资源，并指定了资源的名称为"数据导入"，路径为"/awardPatent/import"。这个方法的作用可能是将接收到的文件进行处理，然后返回一个包含处理结果和相关数据的。是一个自定义的响应数据类，表示成功的响应，并包含了导入操作的结果数据。是一个自定义的响应数据类，可能包含了请求的处理结果和相关的数据。具体来说，这个方法可能是用于处理文件导入的逻辑。类型的文件作为参数，表示要导入的文件。
Vue 导出前端数据报表为xlsx文件（通用组件）
一碗清深的博客
03-06 632
导出数据报表基本上有两种形式，第一种是前端请求数据之后，后端将数据导出为文件，前端再将文件下载下来；第二种是前端请求数据之后，前端将数据保存到文件。 本文将讲解第二种方法，前端请求数据之后将数据渲染到表格，再通过按钮点击保存到本地文件。
vue3导入xls,xlsx,csv表格，并生成json格式
u012115686的博客
05-12 472
【代码】vue3导入xls,xlsx,csv表格，并生成json格式。
前端上传excel文件转json数据
m0_49101942的博客
08-25 1032
1、安装xlsx命令: npm i xlsx -D。2、新建testExcelToJson.vue文件。
vue3使用xlsx导出json数据为excel表格
sywdebug的博客
08-01 3052
可以看到虽然导出了，但是上面name和age显然不是我们想要的，我们想要的是“姓名”和“年龄”，使用。导出文件结果，下面工作表名称就不截了，图片太长不好看，工作表名就是students。更改标题后的结果，可以看到从A1开始数据改变成了刚刚写的数据。也可以改变列宽，我用不到就先不写了，可以自行看官方文档。可以向工作表中添加JS数据的数组实现标题重命名。要导出的数据需要是一个没有嵌套的对象数组。总的来说比之前写的乱七八糟的更简单易懂了。可以看到从B5改变数据为上面添加的。在需要使用的页面引入。......
Vue导入Excel文件转换为json
akkigg的博客
04-04 1192
前端导入Excel文件转换为json
Vue3 exceljs库实现前端导入导出Excel
热门推荐
qq_33816243的博客
02-25 1万+
ExcelJS是一个用于在Node.js和浏览器中创建、读取和修改Excel文件的强大JavaScript库。它提供了丰富的功能和灵活的API，使你能够在你的应用程序中处理和操作Excel文件。创建和修改Excel文件：ExcelJS允许你创建新的Excel工作簿，并在其中添加工作表、行和单元格。你可以设置单元格的值、样式、数据类型以及其他属性。读取和解析Excel文件：ExcelJS支持读取和解析现有的Excel文件。你可以将Excel文件加载到工作簿中，然后访问工作表、行和单元格的数据。
vue3实现上传excel解析成json数据，生成json文件自动下载
m0_49016709的博客
03-23 1275
上传excel文件，通过js解析成json格式的数据。
Vue3_导入excel文档
Rainbow_bead的博客
10-08 1223
Vue3_导入excel文档
vue3采用xlsx库实现本地上传excel文件，前端解析成Json数据
Smile_666666的博客
03-05 7523
需求：本地上传excel文件，但需要对excel文件的内容进行某些操作（增删改等）后再上传到后端服务器中，则需要前端解析excel文件 实现：通过xlsx库实现 1、下载依赖 npm install xlsx --save 2、页面使用 import * as XLSX from 'xlsx' // vue3可用此引入 import XLXS from "xlsx"; // vue2可用此引入 3、页面代码写法 <input type="file" accept=".xls
vue3 js语法格式配合使用antd design vue组件库，后端提供接口，现需要前端实现文件导入导出功能
05-25
可以使用以下步骤来实现文件导入导出功能： 1. 安装 antd 和 xlsx 库 ``` npm install ant-design-vue xlsx --save ``` 2. 在 Vue 组件中引入 antd 和 xlsx ```javascript import { Button, Upload, message } from &#39;ant-design-vue&#39;; import XLSX from &#39;xlsx&#39;; ``` 3. 在 Vue 组件中添加上传组件和下载按钮 ```html <template> <div> <a-button type="primary" @click="downloadExcel">下载Excel模板</a-button> <a-upload :before-upload="beforeUpload" :show-upload-list="false"> <a-button>上传Excel文件</a-button> </a-upload> </div> </template> ``` 4. 实现下载 Excel 模板功能 ```javascript downloadExcel() { const fileName = &#39;example.xlsx&#39;; const headers = [&#39;姓名&#39;, &#39;年龄&#39;, &#39;性别&#39;]; const data = [[&#39;张三&#39;, 18, &#39;男&#39;], [&#39;李四&#39;, 20, &#39;女&#39;], [&#39;王五&#39;, 22, &#39;男&#39;]]; const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data]); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, &#39;Sheet1&#39;); XLSX.writeFile(workbook, fileName); } ``` 5. 实现上传 Excel 文件功能 ```javascript beforeUpload(file) { const reader = new FileReader(); reader.onload = (e) => { const data = e.target.result; const workbook = XLSX.read(data, { type: &#39;binary&#39; }); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; const headers = [&#39;姓名&#39;, &#39;年龄&#39;, &#39;性别&#39;]; const fields = [&#39;name&#39;, &#39;age&#39;, &#39;gender&#39;]; const records = XLSX.utils.sheet_to_json(worksheet, { header: headers, range: 1 }); const valid = records.every((record) => fields.every((field) => record[field])); if (valid) { // 调用后端接口保存数据 message.success(&#39;上传成功&#39;); } else { message.error(&#39;上传失败，请检查文件格式&#39;); } }; reader.readAsBinaryString(file); return false; } ``` 在 beforeUpload 方法中，我们使用 FileReader 对象读取上传的文件内容，并使用 XLSX 库解析 Excel 文件。如果文件格式正确，就将数据传递给后端接口进行保存，否则提示用户上传失败。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

__冬七

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值