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

  • 手机出现fastboot是怎么回事(手机出现fastboot怎么退出来)

    手机出现fastboot是怎么回事(手机出现fastboot怎么退出来)

  • 淘宝买过的店记录怎么删除(淘宝买过的店记录怎么看)

    淘宝买过的店记录怎么删除(淘宝买过的店记录怎么看)

  • 电脑版左缩进1.5cm怎么设置(左缩进1.8cm 咋弄)

    电脑版左缩进1.5cm怎么设置(左缩进1.8cm 咋弄)

  • 美图手机充电慢怎么办(美图t9充电变慢)

    美图手机充电慢怎么办(美图t9充电变慢)

  • 圈数字怎么打10以上的(圈数字怎么打10以上的苹果电脑)

    圈数字怎么打10以上的(圈数字怎么打10以上的苹果电脑)

  • 加入抖音公会的利弊(加入抖音公会的开播收入可以自提吗)

    加入抖音公会的利弊(加入抖音公会的开播收入可以自提吗)

  • 微流控芯片技术的原理(微流控芯片技术检测抗体原理)

    微流控芯片技术的原理(微流控芯片技术检测抗体原理)

  • 苹果x屏幕不亮电话还能打通(苹果14屏幕常亮)

    苹果x屏幕不亮电话还能打通(苹果14屏幕常亮)

  • wps怎么空两格(wps怎么空两格一段都动了)

    wps怎么空两格(wps怎么空两格一段都动了)

  • 抖音如何隐藏抖音号(抖音如何隐藏抖音号不被搜索到)

    抖音如何隐藏抖音号(抖音如何隐藏抖音号不被搜索到)

  • 华为gps信号弱修复(华为手机gps信号弱怎么处理)

    华为gps信号弱修复(华为手机gps信号弱怎么处理)

  • 华为nova3内存卡插哪里(华为nova3内存卡设置)

    华为nova3内存卡插哪里(华为nova3内存卡设置)

  • 苹果手机充电后黑屏无法开机怎么办(苹果手机充电后黑屏了,怎么样能打开)

    苹果手机充电后黑屏无法开机怎么办(苹果手机充电后黑屏了,怎么样能打开)

  • 网关在osi第几层(网关是哪一层的互联设备)

    网关在osi第几层(网关是哪一层的互联设备)

  • 企业微信有直播功能吗(企业微信有直播回放吗)

    企业微信有直播功能吗(企业微信有直播回放吗)

  • 5号电池2a和3a的区别(5号电池 aa)

    5号电池2a和3a的区别(5号电池 aa)

  • 鲲鹏920用在那款手机上(鲲鹏920k)

    鲲鹏920用在那款手机上(鲲鹏920k)

  • word怎么添加目录内容(word怎么添加目录和页码)

    word怎么添加目录内容(word怎么添加目录和页码)

  • 此sim卡无法使用lte(苹果sim卡无效)

    此sim卡无法使用lte(苹果sim卡无效)

  • 什么是真无线(什么是真无线蓝牙耳机主动降噪)

    什么是真无线(什么是真无线蓝牙耳机主动降噪)

  • 腾讯电脑管家网络连接工具有什么功能?(腾讯电脑管家网络修复)

    腾讯电脑管家网络连接工具有什么功能?(腾讯电脑管家网络修复)

  • windows11系统时间怎么设置? win11设置24小时制的技巧(win11时间不对)

    windows11系统时间怎么设置? win11设置24小时制的技巧(win11时间不对)

  • 【Pytorch深度学习50篇】·······第六篇:【常见损失函数篇】-----BCELoss及其变种

    【Pytorch深度学习50篇】·······第六篇:【常见损失函数篇】-----BCELoss及其变种

  • 如何在Python中生成ndarray(pythonzen)

    如何在Python中生成ndarray(pythonzen)

  • 增值税申报可以作废几次
  • 以前损益年度调整
  • 二手车没有发票能过户吗
  • 销售成本结转属于收入吗
  • 研发支出的项目叫什么
  • 小规模企业多交增值税
  • 企业运费发票需要缴纳印花税吗附政策依据
  • 冲以前年度暂估
  • 固定资产转为投资性房地产折旧
  • 产品质量问题怎么处罚
  • 单位捐赠汽车账务处理要如何做?
  • 工具器具属于固废吗
  • 金融企业的代理贷款什么意思
  • 差额征税可以开发票吗
  • 施工企业资产负债率
  • 科技开发属于什么产品
  • 短期投资算债权吗
  • 如何解决windows7无法开机
  • 电脑右下角弹出网页没有×怎么关闭
  • 航天税控服务费
  • php apc
  • 应付债券包括
  • PHP:oci_field_name()的用法_Oracle函数
  • scvc8.exe是什么
  • windows默认网关应该设置为的地址
  • kprcycleaner.exe是什么
  • 期间费用为何要摊销
  • 如何写php守护进程数据
  • SE注意力机制加在什么位置
  • 终止pppoe会话
  • kill命令用法
  • 金融机构存放的保证金存款
  • 退回社保怎么做分录
  • 诉讼费发票丢失可以补开吗
  • 小规模普通发票几个点的税
  • phpcms验证码不显示
  • mongodb的安装过程和操作命令
  • 土地评估增值计入什么科目
  • 农民工工资专户管理暂行办法
  • 房地产企业收到定金是否要预缴税款
  • 应税销售额税率
  • 股权转让 开票
  • 哪些情况可以开立基本账户
  • 费用什么情况下要写报销单呢
  • 应付账款暂估款的账务处理
  • 工业企业中制造费用包括哪些内容
  • 固定资产抵债交不交增值税
  • 什么是存货周转天数
  • 税务局代开的增值税专票可以红冲吗?
  • 销售合同的印花税由谁交
  • 以物易物是什么时代
  • 债券分期付息到期还本的意思
  • 货款和发票金额一样吗
  • 关于单独计价的规定
  • t3用友年底结束怎么建下一年
  • 工业企业应通过其他应付款科目核算的有
  • sqlserver如何更改数据类型
  • 关闭terminal monitor
  • 微软开放式许可协议
  • 利用内置管理工具的方法
  • 注册表出错打不开程序
  • Windows server 2008设置远程桌面连接的详细步骤(图文教程)
  • iptables配置文件详解
  • solaris netstat
  • ubuntu12.04 amd64系统中lamp环境搭建方法
  • centos8 redhat
  • 家字取名男孩名字
  • linux工具包
  • Win7升级win10后可以删除2345吗
  • linux 翻译
  • 主流安卓开发
  • unity点击按钮没反应
  • 常用原生js兼容软件
  • nodejs增删改查
  • unity3d基础教程
  • html读书笔记
  • Javascript字符串对象函数
  • eclipse怎么连接derby数据库
  • 厦门增值税发票查询
  • 南京市国家税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设