位置: 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万
  • 待认证进项税额是什么情况下用的
  • 税收指的是什么
  • 应收账款逾期未收回账务处理
  • 退票凭证什么样子
  • 资产总额的季度怎么算
  • 一般纳税人什么条件
  • 设备5年直线法计提折旧怎么做
  • 汇算清缴结束后,税务机关发现企业应当取得
  • 市场运营部门工作职责
  • 房企与个人订立购房合同是否贴花?
  • 员工预借差旅费属于什么科目
  • 劳务派遣税收政策文件
  • 各省市地税发票怎么开
  • 怎么查公司连续缴纳社保记录
  • 房地产企业不可能没有合同台账
  • 企业购买理财产品收益会计分录
  • 税务利润表怎么填
  • 科研项目经费怎么填
  • 商品进销差价如何结平
  • 待处理财产损益计入资产负债表哪里
  • 餐饮店工装
  • 个体户没有进项票怎么开销项发票
  • 外地预缴增值税可以抵本地增值税
  • 商品进销差价主营业务收入
  • 计提生产设备折旧费计入什么科目
  • 疫情期间企业贷款利率多少
  • 无法登陆wifi怎么登陆路由器
  • 银行收到退款怎么回复
  • 电脑耳机插上还是外放,重启就可以
  • 分公司 股东
  • 冲销以前年度多计提的工资资产负债表怎么平
  • 会计新准则讲解
  • php读取opc
  • thinkphp框架介绍
  • 什么是冲帐?怎么个冲法?
  • 公转私备注用途
  • 世界上最早的计算机是
  • 可供出售金融资产和交易性金融资产
  • 月底库存现金不足怎么办
  • joomla中文手册
  • 城镇土地使用税减免税政策2023年
  • 非流动资产基金对应的新科目
  • dict在python中的作用
  • 建筑业用的会计账簿
  • 什么人适合单干
  • mysql升级-5.1升级到5.7
  • 存货周转率是指企业某一会计
  • 纳税人应纳税额怎么算
  • 没有收入如何做账
  • 企业支付的佣金计算多少税率呢
  • 一般纳税人增值税怎么算
  • 新政府会计制度与旧制度区别
  • 主营业务收入的计算公式
  • 用党委的经费买房可以吗
  • 三证合一办理流程及费用
  • 发票跨年冲红怎么做账
  • 手机开个人发票怎么开
  • 记账凭证的基本要素包括
  • win10禁用所有启动项
  • 谁编写了元素周期表
  • tcpsyncookies
  • vmware安装redhat6.5
  • fedora系统
  • windows z
  • os x yosemite10.10.5怎么样?os x yosemite10.10.5公测版下载地址
  • SmartFTP.exe - SmartFTP是什么进程
  • 怎么取消win10通知消息
  • mac修改java版本
  • cocos2dx小游戏
  • 可以自己做手写的软件
  • python3解析json
  • vue@cli
  • node怎么用
  • shell读取文本内容到变量
  • js中checked什么意思啊
  • javascript学习指南
  • 美国各地区消费水平
  • 工会经费填错了怎么办
  • 上海税务举报邮箱号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设