位置: 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分布式爬虫笔记(五)(分布式网络爬虫)

  • 企业所得税申报时间
  • 食堂没有发票怎么做账
  • 委托加工物资需要计提存货跌价准备吗
  • 出口退税转内销会计分录
  • 2020劳务退税怎么退
  • 培训学校教具记在什么费用
  • 汽车租赁的印花税税率
  • 向一般纳税人销售劳保专用物品
  • 租别人厂房土地税房产税怎么交
  • 结余资金财政收回如何做账
  • 发票抬头是个人,能在单位报销吗
  • 固定资产对外投资的税务处理
  • 收取线路维护费合法吗
  • 携税宝服务费可以入办公费吗
  • 资产负债表日后事项是什么意思?
  • 小规模纳税人附加税会计分录
  • 话费打印发票怎么缩小
  • 进项票税率不同怎么处理
  • 收到专用发票的会计分录
  • 没有收到发票的费用怎么入账
  • 生产型企业进口退税政策
  • 厦门新车购置税计算
  • 苹果x如何显示电量数字
  • 企业三大期间费用是什么
  • 职工教育经费是工资总额的多少
  • 如何给网页添加水印
  • 可作为税前扣除的项目有
  • php数组函数有哪些
  • 固定资产转卖怎么开票
  • 商业企业会计科目表
  • 纳税人跨县(市、区)提供建筑服务,应向建筑服务发生地
  • php import
  • 承接旅游业务
  • 核定征收印花税的文件
  • 手撕发票怎样盖章子
  • 雷斯岬国家海岸公园有信号吗
  • php操作oracle
  • 生产设备改良支出需要结转到本年利润吗
  • 网络安全工具大全图片
  • 遮天传官网
  • php二进制字符串压缩
  • wordpress site
  • python中的函数库
  • php跳转到指定网页代码
  • 织梦自定义模型调用
  • 织梦怎样实现文件上传
  • 5万元买二手车能买什么价位的车
  • 所得税视同销售行为有哪些呢?
  • 增值税发票遗失可以补开吗
  • sqlserver2008新建实例
  • 企业分期收款销售商品,即商品已经交付
  • 个体工商户公帐转法人私人账户
  • 计提工会经费是什么凭证
  • 采购原材料怎么做分录
  • 公司提供给员工暂借款未还款离职
  • 损益类科目如何填写手工总账
  • 公允价值变动损益借贷方向
  • 商品进销存台账
  • 过账发票和不过票的区别
  • 生产能量等于什么
  • Windows 2000中NTFS磁盘权限应用
  • windows server 2008 R2
  • archlinux安装zsh
  • centos lftp
  • WINDOWS操作系统属于什么操作系统
  • win7winxp双系统怎么装
  • windows xp系
  • Nymse.exe - Nymse是什么进程 有何作用
  • win10周年纪念版
  • win10qq经常卡
  • js内存释放
  • 关于减肥的好方法
  • .android
  • 批处理系统的应用场景
  • python3.6语法
  • 广东省广州市国家安全局
  • 买下中国需要多少钱?
  • 手撕发票查询真伪平台
  • 租了店面
  • 会计审计和税务服务属于什么税目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设