前端 excel 表格导出
我们习惯了后端去处理表格,直接接口返回 ,那前端如何轻松的导出表格呢?
文章目录
Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐
/ | 使用 |
---|---|
兼容性 | 支持 vue、react 、angular 几乎兼容所有浏览器 (IE 8版本以上) |
使用 | 非常灵活 |
安装
npm install --save xlsx
① vue2 中使用
vue2 导出表格 |
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 )
<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>
三:效果如下 👇
② vue3 中使用
vue3 导出表格 |
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 导出表格 |
二:使用 👇 ( 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('导出失败')
}
})
总结不易,希望uu们不要吝啬你们的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁