纯前端导出表格，零基础入门到精通，收藏这篇就够了

原创于 2025-12-13 13:53:26 发布 · 220 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #性能优化 #运维

计算机同时被 3 个专栏收录

1864 篇文章

订阅专栏

程序员

1863 篇文章

订阅专栏

前端

38 篇文章

订阅专栏

前端 excel 表格导出

我们习惯了后端去处理表格，直接接口返回，那前端如何轻松的导出表格呢？

文章目录

- - 前端 excel 表格导出
  - Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐
  - - - 安装
      - ① vue2 中使用
      - ② vue3 中使用
      - ③ react 中使用
  - Ⅲ. 通过 vue-json-excel ⭐⭐
  - - - 安装
      - 使用
  - Ⅱ. 通过blob文件流导出 ⭐⭐⭐
  - - - 用于后端返回blob数据

Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐

/	使用
兼容性	支持 vue、react 、angular
几乎兼容所有浏览器（IE 8版本以上）
使用	非常灵活

安装

npm install --save xlsx

① vue2 中使用

vue2 导出表格

一：导出的 js 配置文件 👇 （excelConfig.js）```
const XLSX = require(“xlsx”); //使用import有的属性无法找到
export function exportExcel(filename,data) {
let exc = XLSX.utils.book_new(); // 初始化一个excel文件
let exc_data = XLSX.utils.aoa_to_sheet(data); // 传入数据 , 到excel
// 将文档插入文件并定义名称
XLSX.utils.book_append_sheet(exc, exc_data, filename);
// 执行下载
XLSX.writeFile(exc, filename + ‘xlsx’);
}


二：使用 👇 ( page.vue )


三：效果如下 👇

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/455546090bfbb6b5d3d44fe80f4660d3.png)

* * *

###### [](https://blog.youkuaiyun.com/weixin_42232622/article/details/127834241?ops_request_misc=elastic_search_misc&request_id=39610b43e52b4b69ced7da1e807499ba&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-127834241-null-null.142^v102^pc_search_result_base9&utm_term=%E5%89%8D%E7%AB%AF%E5%AF%BC%E5%87%BAexcel&spm=1018.2226.3001.4187)② vue3 中使用

<table><tbody><tr><td bgcolor="#C0FF3E">vue3 导出表格</td></tr></tbody></table>

一 ：导出的 js 配置文件 👇 （excelConfig.js） 相比 vue2 导入的方式不同```
import * as XLSX from 'xlsx' 
export function exportExcel(filename,data) {
    let exc = XLSX.utils.book_new();
    let exc_data = XLSX.utils.aoa_to_sheet(data); 
    XLSX.utils.book_append_sheet(exc, exc_data, filename);
    XLSX.writeFile(exc, filename + 'xlsx');
}

二：使用 👇 ( page.vue )

<template>
   <button @click="download">下载表格</button>
</template>
<script  setup>
import { exportExcel } from "./excelConfig"
const exc_data = [
					['第一列', '第二列' ,'第三列'],
					['aa', 'bb' ,'cc'],
					['dd', 'ee' ,'ff']
				];
function download() {  exportExcel('vue3导出的表格',this.exc_data)  }
</script>

三：效果同上 👆

③ react 中使用

react 导出表格

一：导出的 js 配置文件 👆 （excelConfig.js） >与 vue2 的写法完全相同

二：使用 👇 ( page.jsx )

import React from "react";
import {exportExcel } from './excelConfig'
const exc_data = [
		['第一列', '第二列' ,'第三列'],
		['aa', 'bb' ,'cc'],
		['dd', 'ee' ,'ff']
];
function Index() {
  return (
    <div className="box">
       <button onClick={()=>{ exportExcel('react导出表格',exc_data) }}>下载</button>
    </div>
  );
}
export default Index;

三：效果同上 👆

Ⅲ. 通过 vue-json-excel ⭐⭐

/	使用
兼容性	只支持vue
使用	使用简单，但不灵活

安装

npm install vue-json-excel

使用

一：主文件 => 注册该全局组件 👇 (main.js)

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExc', JsonExcel)

二：使用该组件 👇 （page.vue）

<template>
    <download-excel
      class="export-excel-wrapper"
      :data="excelpage"
      :fields="fields"
      name="filename"
      type="xlsx"
    >
     <button> 导出excal </button>
    </download-excel>
</template>
<script>
export default {
  data() {
    return {
      fields: {
        姓名: "name", //对应字段
        年龄: 'age'
      },
      excelpage: [{ name: '张三', age:18}, {name:'李四', age:20}],
    };
  }
}
</script>

三：效果如下 👇
在这里插入图片描述

Ⅱ. 通过blob文件流导出 ⭐⭐⭐

用于后端返回blob数据

如果后端返回给前端的 blob 数据，前端转换表格导出 👇

xxxApi(params).then(res=>{
	if(res){
          const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
          const a = document.createElement('a')
          a.download = '表格.xlsx'
          a.href = window.URL.createObjectURL(blob)
          a.click()
          console.log('导出成功')
	}else{
		console.log('导出失败')
	}
})