软件系统开发定制纯前端 excel 导出

前端 excel 表格导出

软件系统开发定制我们习惯了后端去处理表格，软件系统开发定制直接接口返回 ，软件系统开发定制那前端如何轻松的导出表格呢？

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

安装

npm install --save xlsx
1

① 中使用

一 ：导出的 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');}
1
2
3
4
5
6
7
8
9

二：使用 👇 ( page.vue )

<template>    <button @click="download">下载表格</button></template><script>import { exportExcel } from "./excelConfig";export default {  data() {    return {		exc_data:[ 			['第一列', '第二列' ,'第三列'],			['aa', 'bb' ,'cc'],			['dd', 'ee' ,'ff'],		 ]    };  },  methods: {    download() {      exportExcel('vue2导出的表格',this.exc_data);    },  },};</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

三：效果如下 👇

---

② 中使用

一 ：导出的 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');}
1
2
3
4
5
6
7

二：使用 👇 ( 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>
1
2
3
4
5
6
7
8
9
10
11
12

三：效果同上 👆

---

③ 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三：效果同上 👆

---

Ⅲ. 通过 vue-json-excel ⭐⭐

安装

npm install vue-json-excel
1

使用

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

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

二：使用该组件 👇 （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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三：效果如下 👇

---

Ⅱ. 通过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('导出失败')	}})
1
2
3
4
5
6
7
8
9
10
11
12

总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁