位置: 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库)

  • 银行贴现属于贷款吗
  • 计提增值税的会计凭证
  • 机器设备一般折旧几年
  • 比较优先股和普通股
  • 小规模纳税人超500万后何时认定为一般纳税人
  • 银行付款回单怎么看
  • 企业应收票据贴现给银行所获得的现金计入现金流量表
  • 什么叫外埠存款
  • 灭草剂使用说明
  • 待转销项税额如何列报
  • 收到供应商开具什么发票
  • 兼职获得员工旅游资源
  • 投资大收益小,怎么办?
  • 已付款收货未收到发票会计分录
  • 工地没有手续擅自开工违法吗
  • 一般纳税人附加税费减免政策
  • 全年累计申报个税怎么计算
  • 项目材料验收流程
  • 暂估入库的处理方式有哪三种
  • hif文件怎么打开
  • 如何给电脑重装系统教程
  • 承包合同包含的内容
  • 摊余成本计量的金融资产
  • 股东股权折价转让会计分录
  • Win7系统僵尸部队4存档丢失的解决方法
  • 新西兰萨摩亚人
  • 从上布法罗荒野地区的惠特克顶小道向东看,阿肯色州奥沙克国家森林 (© Jens Lambert Photography/Getty Images Plus)
  • php生成html
  • echarts柱形图
  • 身份证php编写
  • 增值税附加税必须交吗
  • 学堂在线结课后还能看吗
  • react 入门教程
  • 社会团体会员费做分录
  • wordpress整站备份
  • phpcms文档
  • 公司账户收款退回怎么查
  • 向股东免息借款怎么做账
  • 分公司转款总公司总公司怎样会计处理
  • 给个人的返佣如何交税
  • 变更法人代表是重大事项吗
  • 企业金融资产包括银行存款吗
  • 一般纳税人金税盘怎么清卡
  • 计提所得税后再结转本年利润吗
  • 进项发票未认证
  • 主营业务收入多计提怎么冲减
  • 哪些发票不能用
  • 酒店没有营业执照开业犯法吗
  • 进项税额增值税专用发票
  • 应收帐款坏帐会计分录怎么处理
  • 出口退税对应的进项不能抵扣对吗
  • 应付利润科目
  • 加计抵减10%政策适用范围
  • 营改增问题解答
  • 未打印税务分类怎么处理
  • windows怎么显示隐藏文件
  • win8.1 multiple edition
  • 游戏与操作系统不兼容
  • centos7怎么安装图形化界面
  • 拉伸设置
  • unity3d ngui-TweenRotation翻牌动画
  • android开发工具排行榜
  • setcontentview报错
  • 怪物掉落物品的获取方式
  • linux创建用户的命令是什么
  • 使用jquery实现表单验证
  • python介绍的主要内容
  • unity怎么导入3d模型
  • javascript总结
  • jquery fullpage
  • multiset volatile
  • python批量删除行
  • 国家税务总局税法
  • 对税务领导的批示怎么写
  • 电子税务局登录方式
  • 如何理解税收的本质
  • 成都税务局网站首页
  • 车险包括车船费吗
  • 税收优惠政策有哪些企业
  • 怎样才能做好企业总经理?谈谈你的看法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设