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

  • oppok9pro是什么处理器(oppok9pro是中端机吗)

    oppok9pro是什么处理器(oppok9pro是中端机吗)

  • 苹果13键盘下面空白怎么去掉(苹果13键盘下面灰色怎么去掉)

    苹果13键盘下面空白怎么去掉(苹果13键盘下面灰色怎么去掉)

  • analytics是啥

    analytics是啥

  • 苹果手机在哪查看尺寸(苹果手机在哪查内存)

    苹果手机在哪查看尺寸(苹果手机在哪查内存)

  • 在word中保护文档可以通过什么实现(word保护文档操作有哪些)

    在word中保护文档可以通过什么实现(word保护文档操作有哪些)

  • 头条mcn入驻条件(头条加入mcn)

    头条mcn入驻条件(头条加入mcn)

  • 惠普笔记本保修几年(惠普笔记本保修期查询)

    惠普笔记本保修几年(惠普笔记本保修期查询)

  • 微信群文件多久过期(微信群文件多久可以撤回,撤回后群文件里还有记录吗)

    微信群文件多久过期(微信群文件多久可以撤回,撤回后群文件里还有记录吗)

  • oppoa91电池容量是多少(oppoa91的电池容量)

    oppoa91电池容量是多少(oppoa91的电池容量)

  • 用电脑登qq为何不是电脑在线(qq用电脑登不上去是咋回事)

    用电脑登qq为何不是电脑在线(qq用电脑登不上去是咋回事)

  • 华为nova6有灭屏显示吗(华为nova6有灭屏显示时间吗)

    华为nova6有灭屏显示吗(华为nova6有灭屏显示时间吗)

  • 为什么微信激活收不到验证码(为什么微信激活说是无效订单数据)

    为什么微信激活收不到验证码(为什么微信激活说是无效订单数据)

  • html格式怎么转换mp3(html怎么转成文档)

    html格式怎么转换mp3(html怎么转成文档)

  • 大众点评怎么注销商家(大众点评怎么注销店铺信息)

    大众点评怎么注销商家(大众点评怎么注销店铺信息)

  • 截图在哪里(我的截图在哪里)

    截图在哪里(我的截图在哪里)

  • Reno Ace怎么打开开发者选项(reno ace rom)

    Reno Ace怎么打开开发者选项(reno ace rom)

  • wps2019脚注21怎么加圈(wps脚注怎么设置[1][2])

    wps2019脚注21怎么加圈(wps脚注怎么设置[1][2])

  • word无法修改内容(word无法修改内容怎么办)

    word无法修改内容(word无法修改内容怎么办)

  • 小米mde6s配置参数(小米mde6什么型号)

    小米mde6s配置参数(小米mde6什么型号)

  • 港版苹果xsmax是双卡吗(港版xsmax和国行区别)

    港版苹果xsmax是双卡吗(港版xsmax和国行区别)

  • procreate怎么取色(procreate怎么取色取不了)

    procreate怎么取色(procreate怎么取色取不了)

  • 怎么解除微博会员自动续费(微博20211怎么解除)

    怎么解除微博会员自动续费(微博20211怎么解除)

  • c语言可以开发app吗(C语言可以开发什么)

    c语言可以开发app吗(C语言可以开发什么)

  • realmex后盖是什么材质(realme后盖怎么打开)

    realmex后盖是什么材质(realme后盖怎么打开)

  • 图虫app怎么保存视频(图虫如何保存到相册)

    图虫app怎么保存视频(图虫如何保存到相册)

  • 打电话是空号是什么原因(打电话是空号是不是已经注销了)

    打电话是空号是什么原因(打电话是空号是不是已经注销了)

  • 棕榈滩的毯子章鱼,佛罗里达州  (© Steven Kovacs/Minden Pictures)(棕榈滩的读音)

    棕榈滩的毯子章鱼,佛罗里达州 (© Steven Kovacs/Minden Pictures)(棕榈滩的读音)

  • 什么是小规模纳税人税率
  • 计提环境保护税怎么做分录
  • 销售人员的工资属于什么会计科目
  • 技术服务出口免关税政策
  • 固定资产变动包括哪些内容
  • 个人独资企业处罚听证的标准
  • 高新企业季度企业所得税预征税率
  • 合同没签定金可以退的吗
  • 刷信用卡的手续费去哪了
  • 小规模纳税人是小微企业吗
  • 全年一次性奖金个税计算
  • 企业拆迁补偿款要交税吗
  • 建筑工程的适用范围
  • 企业购买房产贷款
  • 航天金税费用怎么做账
  • 办公室零食知乎
  • 附加税的计税依据是销项减进项吗
  • 公司绿化购买的苗木如何进行账务处理?
  • 企业所得税利润怎么算
  • 上月销售的货物会计分录
  • 红字发票是销货单据吗
  • 库存商品转结
  • 无偿转让股权需要交什么税
  • 合作社人工工资账务处理
  • 对于目标文件系统文件过大无法删除
  • win11开机后无法操作
  • php字符串定义
  • 子公司开票给母公司,冲减利润,怎么避免税务风险
  • 发票已付款未认账怎么办
  • linux阅读pdf
  • 往来指哪些科目
  • 卡洛里山脉
  • 补发工资怎么做账
  • 广告费和业务宣传费调增还是调减
  • 简单聊聊太平天国
  • 微信h5页面设计
  • 建筑企业安装水电过程中很难发现的潜在问题
  • vue中用echarts
  • ChatGPT 中文调教指南。各种场景使用指南。学习怎么让它听你的话
  • 存货的期末计价属于会计政策吗
  • 小规模纳税人通行费电子普票能抵扣吗
  • 固定资产的财务业绩是什么意思啊
  • 主营业务收入在哪个报表里面
  • 固定资产的会计政策有哪些
  • 售后回租的实际利率
  • 发票开具与小票的关系是怎样的?
  • 计提的管理费用要结转吗
  • 营改增后租金收入交什么税
  • 利息收入怎么做红字
  • 营改增政策解答
  • 现金支付的范围包括
  • 重分类调整分录是什么
  • 公转私怎么操作
  • 火车票抵扣进项税怎么申报
  • 小规模纳税人标准500万是含税吗
  • 公司企业名称变更流程
  • 应付股利计提了长期不支付
  • 用户登陆login什么意思
  • sqlserver 17051解决方案
  • ubuntu20.04怎么安装
  • macbook存东西一般存在哪
  • centos更新yum update
  • windows8怎么调整亮度
  • 苹果mac os x 怎么样使用光盘
  • 新款苹果笔记本测评
  • windows xp windows
  • mac系统怎么查找文件
  • css 之 background-position-x
  • javaweb物流管理系统源码
  • android4.4iso
  • XML、HTML、CSS与JS的区别整理
  • python字典添加多个键值对
  • javascript闭包的作用
  • md5加密python
  • jquery的选择器都有哪些
  • 补农行卡怎么补几天能补完
  • 车辆购置税查询平台打印
  • 农产品电子发票可以抵扣吗
  • 镇江市税务局官网
  • 滨州市望海花园北侧规划
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设