纯前端导出表格(前端数据导出为excel)

纯前端导出表格 前端 excel 表格导出

推荐整理分享纯前端导出表格(前端数据导出为excel)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前后端导出excel,前端数据导出为excel,前端导出数据,前端导出数据,纯前端导出表格怎么做,纯前端导出表格怎么做,前端导出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 )

<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 导出表格

一 ：导出的 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('导出失败')}})

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