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

  • 小规模企业增值税怎么申报
  • 销售货物业务的销项税额怎么计算
  • 企业增值税退税是算企业利润的吗
  • 印花税计提时应入什么科目
  • 济南非税是什么意思
  • 代开专票上的税额比电子缴款凭证上的税额少怎么调整
  • 出差的餐饮发票的税率是多少
  • 经营范围没有的可以开票吗
  • 残次品销售账务处理
  • 5月工资按多少天算
  • 火车票抵扣进项税怎么计算
  • 影响无形资产项目金额的有
  • 小企业销售材料计入什么科目借方记什么
  • 未开票收入增值税如何计提
  • 没有发票的管理费用汇算清缴的时候怎么调出来
  • 税控信息表
  • 营改增通知规定的税收优惠政策
  • 投资性房地产其他综合收益递延所得税
  • 工程施工会计核算方法
  • 1697508432
  • 科研费收入如何入账?
  • 苹果Mac系统怎么用光盘安装
  • 苹果手机id被锁定什么意思
  • 速动比率计算公式多少合适
  • 上年多计提所得税怎么做会计分录
  • 公司备用金属于夫妻财产吗
  • mac菜单栏如何调整位置
  • 其他应收款年末怎么处理
  • jsPDF + html2canvas A4分页截断 完美解决方案(含代码 + 案例)
  • 企业雇佣临时工个税
  • web服务器的搭建与应用
  • thinkphp 部署
  • 生物制品简易征收文件
  • php两个等号和三个的区别
  • vue 配置
  • flink从入门到实战
  • 残保金是应交税金吗
  • 土地成本会计分录
  • 红冲费用如何处理
  • 待处理财产损益期末结转到哪里
  • 反射怎么解释
  • 出租设备收入交什么税
  • 产权转移数据印花税纳税期限
  • 支付债券发行费怎么算
  • 固定资产报废处置的请示
  • db2数据库安装服务器的环境
  • db2 linux
  • 应收账款与应付账款冲账
  • 业委会究竟在小区起什么作用
  • 兼职会计的工资需要开发票吗
  • 实收资本增减变化为负数的原因
  • 公司法规定股权转让需要满足什么条件
  • 企业的财务战略
  • mysql --help
  • mysql 高效分页
  • SQLServer XML查询18句话入门教程
  • 软碟通可以制作uefi启动盘吗
  • windows已保护你的电脑,阻止你的应用
  • fedora i3wm
  • ubuntu15.04系统怎么使用卸载命令卸载软件?
  • centos解压软件
  • winpup32.exe - winpup32是什么进程 什么意思
  • 如何删除win7
  • android app 源码
  • 基于个人同意处理个人信息的个人什么撤回其同意
  • 用nodejs做的项目
  • appiumforwindows的简单安装和启动(安卓)
  • css优化提高性能的方法有哪些
  • js查看浏览器信息
  • shell脚本批处理
  • python如何安装各种库
  • java教程 视
  • python多线程怎么用
  • jquery 异步加载
  • jquery基本知识
  • 江苏省国税总局
  • 技术转让条件
  • 被标记为广告推销的电话能接吗
  • 知道金额,税额怎么计算
  • 资源综合利用企业所得税优惠
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设