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

  • 进项税额转出如何申报
  • 增值税发票抵扣是什么意思
  • 不是公司的车能抵扣进项吗
  • 开发票,对方收取税点,如何计算
  • 企业银行贷款报表要求
  • 资产负债表库存为负数怎么调整
  • 小规模没有税控怎么办
  • 跟个人租车可以到税务局开发票吗
  • 搬家费账务处理
  • 电脑怎么写记事本
  • 分公司如何缴纳企业所得税
  • 注册资本低于实际投资
  • 承兑贴现利息怎么入账
  • 业务宣传费超出部分以后年度怎样处理
  • 高薪员工如何降职
  • 小型微利企业所得税优惠政策
  • 税审计入什么科目?
  • 预收账款怎么冲减应收账款
  • 公司注销增值税在借方有余额怎么处理
  • 季度缴纳所得税如何做账
  • 水利基金减免政策2019 未超过10万
  • 分公司税款
  • 土地开垦费怎么征收
  • 单位内部控制
  • 固定资产无偿移交怎么做账
  • 利润分配在利润表中如何列示
  • 废旧物资收购发票
  • windows10无法连接到打印机,拒绝访问
  • 各部门领料情况,a产品耗用甲材料3200元
  • win10怎么调出命令行窗口
  • 上一年度会计科目错误怎么更正
  • Win10电脑重装系统要多少钱
  • 进货的折扣该怎么算
  • 未取得发票的工程预付款怎么入账
  • 补缴税款可以享受减免政策么
  • php识别中文
  • 前端vue后端node
  • 账龄分析法计提比例
  • vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
  • php读取数据库复选框数据
  • framework在哪里打开
  • webpack性能优化 加载
  • 人工智能机器人
  • yii框架入门
  • vue路由怎么实现
  • 发票勾选了还能冲红吗
  • 关于小微企业免征增值税
  • 将织梦dedecms转换到wordpress
  • 确定负债排列顺序的依据
  • 消防设备计入什么科目
  • 以摊余成本计量的债权投资与以公允价值计量且其变动
  • 新成立小规模纳税人税收优惠政策
  • 个别计价法下,把每一种存货的实际成本
  • 企业零申报怎么办
  • 应缴国库款和应缴财政专户款有什么区别
  • 企业所得税退税如何进行账务处理
  • 在建工程领用物资时是用成本价还是市场价
  • 自己开发财务软件
  • 工程项目增值税预缴税率
  • 公司购买银行理财产品收益交什么税
  • 营改增后预交营业税怎么处理
  • 用友t3固定资产反结账的操作步骤
  • 公司不做账不报税有什么后果?
  • 个体工商户免征增值税政策
  • 残疾人保障金的工资按实发还是应发
  • 企业收到的应收票据应按什么作为入账金额
  • mongodb与mysql相比的优缺点
  • windows7 ie
  • Windows 7 RTM、Vista、XP 性能测试
  • linux使用场合
  • win8系统开机
  • 在centos7中,一般用( )命令来查看网络接口的状态
  • window10正版系统怎么装
  • win10系统语言包安装方法
  • opengl基础知识
  • shell脚本相互调用
  • unity ugui组件
  • iframe例子
  • 依法纳税的看法
  • 营业费用指哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设