位置: IT常识 - 正文

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

编辑:rootadmin
纯前端导出表格 前端 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');}纯前端导出表格(前端数据导出为excel)

二:使用 👇 ( 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们不要吝啬你们的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁

本文链接地址:https://www.jiuchutong.com/zhishi/298434.html 转载请保留说明!

上一篇:vue3的unplugin-auto-import自动引入

下一篇:Python lxml库的安装和使用(python怎么安装lxml库)

  • 购买的携税宝费用怎么做账?
  • 个人所得税财产租赁所得税率表
  • 财税通财务软件怎么下载
  • 收到上年度所得税发票
  • 失控发票一定要补税吗
  • 哪些科目月底需要结转
  • 备用金支出怎么记账
  • 公司购买汽车可以抵扣吗
  • 奖品偶然所得个税如何申报
  • 企业购买原材料,货款未支付
  • 结转已完工产品会计分录
  • 未分配利润可以转盈余公积吗
  • 机打发票丢失如何处理报销
  • 个体工商户税种认定的税目可以改吗
  • 养牛需要活动场地吗
  • 个体工商户可以给自己交五险一金吗
  • 公司终止的时间是进行注销登记生效后
  • 公司购酒的发票可以开多少
  • 月中发当月工资是怎么算的
  • 广播影视服务需要交文化事业建设费吗
  • 债务重组损益如何确定
  • 预提成本的账务处理
  • 定期存款利息收入怎么算
  • 挂社保不发工资
  • phpstorm怎么用
  • 生产企业出口退税全部流程
  • 前端实现微信联系人二维码
  • 150讲轻松搞定python网络爬虫
  • 固定资产改造替换
  • 注册资本增加了怎么做账
  • 信用减值损失需要纳税调整吗
  • 加权平均资本结构
  • 应付账款转入营业外收入的证明
  • 安装使用漏电保护器是属于哪种安全措施
  • protobuf 文档
  • 年终奖怎么计算个税
  • 残疾人保障金汇算清缴的处理
  • 两者有什么区别用英语怎么说
  • 购入的设备用于研发怎样记账
  • 个人所得税的征收模式为()A
  • 低值易耗品的账务处理图片
  • 固定资产计提折旧的原则
  • 承包费会计处理
  • 工程预付款是否含规费和税金
  • 开办费新会计准则
  • 培训发票能抵扣吗
  • 合并报表成本法调整为权益法分录
  • 销项负数发票如何作废
  • 低值易耗品五五摊销法报废
  • 小企业建账选哪种会计制度
  • sql中存储过程的用法
  • mysql alter table修改表命令整理
  • Sqlserver聚集索引和非聚集索引的区别
  • windows禁用usb口
  • windowsxp教程
  • ubuntu 启动gui
  • win7系统安装无法继续怎么办
  • win7桌面提示7601
  • Ubuntu下配置vpn工作环境
  • win7任务栏窗口总是自动切换
  • mac ds_store
  • puppset
  • linux中压缩文件
  • centos ohmyzsh
  • win8系统ie浏览器打不开
  • win8操作系统如何安装
  • sendmail邮件服务器
  • android开发环境配置
  • cocos2d 动画
  • [置顶]bilinovel
  • 浅析javascript中function 的 length 属性
  • 自定义控件英文
  • 用bat脚本快速编程
  • nodejs实战
  • 数字图像处理期末考试
  • unity加密代码
  • JS backgroundImage控制
  • javascript编写程序
  • 怎么知道税控盘有没有注销
  • 本期应纳的增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设