位置: IT常识 - 正文
纯前端导出表格(前端数据导出为excel)
编辑：rootadmin纯前端导出表格 前端 excel 表格导出
本文链接地址:https://www.jiuchutong.com/zhishi/298434.html
转载请保留说明！
推荐整理分享纯前端导出表格(前端数据导出为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们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁
上一篇：vue3的unplugin-auto-import自动引入
下一篇：Python lxml库的安装和使用(python怎么安装lxml库)
