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

  • 手机6gb十64gb是什么意思

    手机6gb十64gb是什么意思

  • nova5Pro相机怎么调(nova5pro拍照如何)

    nova5Pro相机怎么调(nova5pro拍照如何)

  • 手机拍照存入存储卡的图片属于什么数据(手机拍照片存在手机哪里)

    手机拍照存入存储卡的图片属于什么数据(手机拍照片存在手机哪里)

  • 微信群聊为什么只能加40人(微信群聊为什么找不到了)

    微信群聊为什么只能加40人(微信群聊为什么找不到了)

  • 手机卡过期了充话费还能用吗(手机卡过期了充话费能退吗)

    手机卡过期了充话费还能用吗(手机卡过期了充话费能退吗)

  • 缩进2字符什么意思(缩进二字)

    缩进2字符什么意思(缩进二字)

  • 电力驱动控制系统各部分的主要功能(电力驱动控制系统包括)

    电力驱动控制系统各部分的主要功能(电力驱动控制系统包括)

  • 不是原装的充电器对手机有影响吗(不是原装的充电器对充电器有影响吗)

    不是原装的充电器对手机有影响吗(不是原装的充电器对充电器有影响吗)

  • 为什么qq总被冻结(为什么qq老被冻结)

    为什么qq总被冻结(为什么qq老被冻结)

  • word怎么进行页面设置(word怎么进行页码设置)

    word怎么进行页面设置(word怎么进行页码设置)

  • iphone相机声音怎么关(iphone相机声音怎么关不关闭铃声)

    iphone相机声音怎么关(iphone相机声音怎么关不关闭铃声)

  • 苹果11promax怎么显示电量(苹果11promax怎么样 优点和缺点)

    苹果11promax怎么显示电量(苹果11promax怎么样 优点和缺点)

  • 苹果双卡怎么插卡(苹果13的双卡怎么插)

    苹果双卡怎么插卡(苹果13的双卡怎么插)

  • 苹果11支持双4g吗(苹果11支持双卡双待吗?)

    苹果11支持双4g吗(苹果11支持双卡双待吗?)

  • 计算机的主存储器是指(计算机的主存储器可以分为)

    计算机的主存储器是指(计算机的主存储器可以分为)

  • 抖音安装失败怎么解决(抖音安装失败怎么删除)

    抖音安装失败怎么解决(抖音安装失败怎么删除)

  • vivo怎么关闭低电模式(vivo怎么关闭低电量提示弹窗)

    vivo怎么关闭低电模式(vivo怎么关闭低电量提示弹窗)

  • 苹果手机的airplay在哪里设置(苹果手机的airplay在哪里打开)

    苹果手机的airplay在哪里设置(苹果手机的airplay在哪里打开)

  • word表格文字怎么靠上居中(word表格文字怎么上下居中对齐)

    word表格文字怎么靠上居中(word表格文字怎么上下居中对齐)

  • 小米6x分屏在哪里(小米6x怎样分屏)

    小米6x分屏在哪里(小米6x怎样分屏)

  • vivo手机语言设置中文(vivo手机语言设置图标)

    vivo手机语言设置中文(vivo手机语言设置图标)

  • deepin深度系统更新了哪些内容? 最新版deepin更新内容汇总(深度deepin系统安装教程)

    deepin深度系统更新了哪些内容? 最新版deepin更新内容汇总(深度deepin系统安装教程)

  • 【TypeScript】TS类型断言-类型的声明和转换(五)(typescript类型别名)

    【TypeScript】TS类型断言-类型的声明和转换(五)(typescript类型别名)

  • 操作系统启动流程和BIOS介绍(操作系统启动流程)

    操作系统启动流程和BIOS介绍(操作系统启动流程)

  • 织梦DedeCMS面包屑导航“当前位置”去掉最后一个符号的方法(织梦安装详细教程)

    织梦DedeCMS面包屑导航“当前位置”去掉最后一个符号的方法(织梦安装详细教程)

  • 工会开户所需资料怎么写
  • 招待费专票不可以抵扣
  • 增值税专用发票使用规定 最新
  • 地税补缴社保
  • 应交税费贷方有余额,怎么销账
  • 产品税率下调企业是否要到税务部门备案
  • 贷款公司收取服务费是诈骗吗
  • 工资个税合理避税
  • 免税发票备注栏
  • 建筑劳务公司开发票
  • 往来款项分为哪两类
  • 资源税改革最新政策
  • 内外账合并步骤
  • 子网掩码和默认网关怎么填
  • 年终一次性奖金个税计算
  • 期末留抵税额可以冲减欠税吗
  • windows 10如何使用
  • 王者荣耀中吕布的克星
  • 负债类科目的分类
  • 如何调整文件夹内文件的顺序
  • 使用最新版本的浏览器可以防御黑客
  • win7有线连接怎么设置
  • mac如何恢复到出厂系统版本
  • 进价金额核算法的账务处理特点
  • 残疾人就业保障金
  • 企业所得税征收点
  • 公司挂靠社保的人员需要申报个人所得税吗?
  • php curl_setopt
  • react_router
  • transformer的解码器
  • 物流发票的税率怎么算
  • 制造费用的科目
  • 出口退税企业待遇怎么样
  • 分公司财务核算独立不独立
  • 个人转让上市公司原始股
  • 销售包装什么意思
  • 织梦怎么建站
  • 残疾人个人所得税减免政策2023
  • 小型公司怎么做账
  • 企业所得税计提金额怎么算
  • 在校大学生可以考教师资格证吗
  • 挂靠指的是什么意思?
  • 独立核算分公司与总公司的账务处理
  • 发票已到材料未到会计分录
  • 采购未到票如何入账
  • 来料加工账务处理案例
  • 应交税金—应交增值税(进项税额)
  • 存货报废如何做账
  • 先进先出法实际成本跟成本不一样吗
  • 用友无法填制凭证
  • 主营业务收入是含税还是不含税
  • 开户一定要去银行吗
  • 有奖销售增值税处理
  • boxjs
  • centos 网络监控
  • windows任务管理器占用cpu过高
  • ie10怎么设置ie8兼容模式
  • win10怎么安装java?win10系统安装java的方法
  • win7使用技巧图解
  • win8 Could not load type System.ServiceModel.Activation.HttpModule 错误解决方案
  • jquery 动态添加列表元素
  • nodejs常用api
  • 优质安卓应用
  • 网页shell命令
  • ms-sys
  • bootstrap技术教程
  • dos命令怎么输入命令
  • linux网络编程有什么用
  • unity 3d脚本编程
  • javascript学习指南
  • 每天一篇日记
  • javascript教程完整版
  • jquery页面
  • 代扣社保代扣公式是什么
  • 新疆天山农商银行大额存单2024
  • 收到虚开增值税专用发票怎么处理
  • 广东省国家税务局电子发票系统,网络设置
  • 税务注销后发现报表报错的怎么办
  • 淘宝店铺过户后身份证是谁的
  • 下列哪些表述是正确的( )
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设