位置: IT常识 - 正文

Vue前端表格导出Excel文件(vue table导出excel)

编辑:rootadmin
Vue前端表格导出Excel文件 前言

推荐整理分享Vue前端表格导出Excel文件(vue table导出excel),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue前端表格导出excel没有边框,vue后端导出excel,vue导出excel表格,vue导出execl,vue前端导出word文件,vue导出表格数据,vue实现数据导出为excel,vue导出execl,内容如对您有帮助,希望把文章链接给更多的朋友!

分享一个Vue前端导出Excel文件的方法。记录学习!

Vue前端表格导出Excel文件(vue table导出excel)

功能需求:将表格的全部数据导出Excel格式的文件 前端:Vue3+Element-Plus

这个导出方法全部为前端操作,后端只需要传入表格数据到前端即可(基础的多表查询,用的内连接)

一、实现1. 页面

2.代码2.1 核心方法/** * 表格数据导出Excel实际方法 * @param list */const exportList = (list) => { //表格表头,导出表头 let tableHeader = [['#', '资产编号', '资产名称', '资产类别', '资产型号', "资产单价", "资产金额", "生产厂家", "生产日期", "购买日期", "购买人", "状态", "库存数量"]] list.forEach((item, index) => { let rowData = [] //导出内容的字段 rowData = [ index + 1, item.zcbh, item.zcmc, item.name, item.zcxh, item.zcdj, item.zcje, item.sccj, currencyFormatDate(item.scrq), currencyFormatDate(item.gmrq), item.gmr, item.sts, item.kcsl, ] tableHeader.push(rowData) }) let wb = XLSX.utils.book_new() let ws = XLSX.utils.aoa_to_sheet(tableHeader) XLSX.utils.book_append_sheet(wb, ws, '资产设备基本信息') // 工作簿名称 XLSX.writeFile(wb, '资产设备基本信息.xlsx') // 保存的文件名}

将这个导出方法单独封装出来,带一个参数,即需要导出的所有数据的List集合,那么在调用的时候传参即可使用。

tableHeader 定义表格的表头(此处并不是很严谨,因为还包含了表格的数据,暂时为空,后面遍历时传入)。rowData 是表格具体数据内容的数组,遍历时传入。tableHeader.push(rowData) 将内容放入tableHeader中,形成完整的表格数据。let wb = XLSX.utils.book_new() 定义表格实例。let ws = XLSX.utils.aoa_to_sheet(tableHeader) 创建工作簿,将表格内容放入工作簿。2.2 调用方法/** * 表格数据导出Excel调用方法 */const exportExcel = () => { ElMessageBox.confirm( '确定导出资产设备基本信息表吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', } ) .then(async () => { let list = []; const res = await request.get("asset/listAll"); console.log(res) list = res.data.assetsAllList exportList(list); if (res.data.code === 200) { ElMessage({ type: 'success', message: '即刻开始下载', }) } }) .catch(() => { })}await request.get(“asset/listAll”) 请求后端接口,拿到结果。将结果中的集合赋值给提前定义好的list数组list = res.data.assetsAllList。用了MessageBox消息弹框,根据自己的实际需求哈用到了异步等待,上面的request.get是自己封装的axios方法3.演示

结束

以上为全部内容,欢迎讨论,记录学习!

本文链接地址:https://www.jiuchutong.com/zhishi/298439.html 转载请保留说明!

上一篇:再不跳槽,就晚了(不跳槽怎么形容)

下一篇:Go分布式爬虫笔记(五)(分布式网络爬虫)

  • 买充值卡可以开票吗
  • 培训会议费能否抵扣
  • 增值税 不含税
  • 代人开增值税怎么收费?
  • 城市维护建设税税率
  • 前期差错会计处理知乎
  • 转账支票的用途怎么写
  • 支票结算的账务处理
  • 服务业如何确定收入
  • 股权转让过渡期损益会计处理
  • 工程项目垃圾清运项目编码
  • 房地产预交税金及附加要计提吗
  • 补提固定资产折旧账务处理
  • 企业以前年度的关联交易与预约定价安排
  • 印花税应税凭证填是还是否
  • 减税的案例
  • 税费种认定功能在哪里
  • 预缴的税款可以互抵吗
  • 应计入增值税一般纳税人认定标准的“年应税销售额”
  • 两年前少缴的税款是否应补缴?
  • 原材料质量问题退回
  • 当期亏损需要提企业所得税吗财务报表
  • 即征即退进项税额分摊方法
  • 小规模租赁收入申报流程
  • windows10如何设置屏幕常亮
  • 用于非应税项目的购进货物或应税劳务
  • win10点击添加账户没反应
  • win10打开游戏老是提示
  • linux GTK、KDE、Gnome、XWindows 图形界面区别介绍
  • 纳税调整需要调年度报表嘛
  • linux命令解析
  • 收到投资方投入原材料
  • win10怎么打开移动中心
  • linux网络接口状态命令
  • 固定资产更新改造期间提折旧吗
  • php对二维数组进行排序
  • 企业盈利结转本年利润分录
  • 中途建账期初数据哪里来的
  • yaf框架优缺点
  • 工程收到款项会计分录
  • 2021高频前端面试题汇总
  • yolov3模型大小是多少
  • codeigniter 教程
  • bash的主要功能
  • python中生成器的作用
  • 预付装修款账务处理
  • 可视化调参
  • 织梦标签教程
  • 财政拨款方式有哪几种
  • 一般纳税人暂未开具发票
  • 应交税费明细科目设置最新
  • 应付职工薪酬的含义
  • 汇算清缴后取得上一年发票
  • 以前年度少结转成本怎么办
  • 跨月发票作废怎么做会计分录
  • 慰问金计入什么部门经济分类
  • 销售商品发生的销售退回属于期间费用吗
  • 资本成本率是指企业用资费用与有效筹资额之间的比率
  • 经营活动产生的现金流量净额计算公式
  • 现金日记账1月怎么记账
  • 购买天然气进项税额
  • 银行卡账户年费
  • mysql的子查询语句
  • windows关机蓝屏是怎么回事
  • 在linux中使用什么命令可以执行shell脚本
  • Win10 Mobile 14283红石预览版有哪些机型可以安装?
  • cocos2djs教程
  • 计算机图形学中点画圆法
  • nodejs的组成
  • eclipse运用
  • js正则regexp
  • jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
  • 挂车买保险是怎么买的
  • 昆明地税局长是谁
  • 电子税务局如何签订三方协议扣款
  • 航信开的电子发票怎么导出来
  • 福建电子税务局登录入口
  • 消费税的征税范围包括
  • 大兴区地方税务局
  • 作废的发票验旧之后怎么领取新发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设