首页 > 其他分享 >vue项目以excel表格的形式下载table数据

vue项目以excel表格的形式下载table数据

时间:2023-09-27 12:35:53浏览次数:36  
标签:XLSX vue 表格 xlsx selIn excel workbook table

1,安装插件

      npm install --save [email protected]

      npm install --save [email protected]

2,创建js文件编写代码

      import FileSaver from 'file-saver';

      import * as XLSX from 'xlsx';

      // 导出Excel表格

      export function exportExcel(name, tableName) { //name表示生成excel的文件名  tableName表示表格的id               let sel = XLSX.utils.table_to_book(document.querySelector(tableName))               let selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })               try {                        FileSaver.saveAs(                  new Blob([selIn],                      { type: 'application/octet-stream' }),                      name                )                } catch (e) {                     if (typeof console !== 'undefined')               console.log(e, selIn)                }                return selIn        } 3,在组件里面引用       exportExcel("汇总成绩报告.xlsx", "#tableData");   4,原理           首先,使用id选择器获取到table表格,           然后,使用 XLSX.utils.table_to_book() 方法将这个表格 DOM 元素转换为一个 workbook 对象,         table_to_book() 方法会将表格中的每个单元格的数据提取出来,并按照 Excel 的格式转换成一个 workbook 对象。      最后,利用 XLSX.write() 方法将 workbook 对象导出一个名为‘汇总成绩报告’的Excel文件,                      这一步会将 workbook 对象转换为二进制的 Excel 文件,并触发文件下载到用户的设备上。

标签:XLSX,vue,表格,xlsx,selIn,excel,workbook,table
From: https://www.cnblogs.com/fxw1996/p/17732407.html

相关文章

  • easy读取excel数据,包含合并数据
    实例数据 1.监听器:@Slf4jpublicclassCustomAnalysisEventListener<T>extendsAnalysisEventListener<T>{privateintheadRowNum;publicCustomAnalysisEventListener(intheadRowNum){this.headRowNum=headRowNum;}privateList<......
  • Vue Viser柱状图,根据数值显示不同颜色
    <template><div><v-chart:forceFit="true":height="height":data="data":scale="scale"><v-tooltip/><v-axis/><v-barposition="year*sales":colo......
  • 使用EasyExcel 导入数据,失败原因数据导出
    引言在日常开发过程中,Excel导入是非常常见的场景,而且也有很多开源的项目是针对Excel的读写的,如Apache的poi,最近用的比较好的还是阿里的EasyExcel开源工具。平时我们只是简单的读取文件并写入数据库持久化即可,但是前段时间,产品搞了个需求,需要将导入失败的数据及原因写入Excel......
  • 工作流如何实现?集成?springboot+vue+activiti技术栈
    前言activiti工作流引擎项目,企业erp、oa、hr、crm等企事业办公系统轻松落地,一套完整并且实际运用在多套项目中的案例,满足日常业务流程审批需求。一、项目形式springboot+vue+activiti集成了activiti在线编辑器,流行的前后端分离部署开发模式,快速开发平台,可插拔工作流服务。工作......
  • Vue2.0 浅学笔记
    Vue是框架,也是生态。1.VueAPI风格选项式(Vue2)组合式(Vue3)2.入门node.js版本大于153.创建项目创建项目npminitvue@latest开发环境VScode+Volar4.基本语法1.文本插值仅能使用单一表达式使用JavaScript表达式每个绑定仅支持单一表达式,也就是一段能够被求值的J......
  • Vue 3.0开发的开源前端项目
    文章来源:https://zhuanlan.zhihu.com/p/587627578 1,PPTistPPTist是一个基于Vue3.x+TypeScript+Pinia+AntDesignVue+Canvas开发的在线演示文稿(幻灯片)应用,还原了大部分OfficePowerPoint的功能,支持文字、图片、形状、线条、图表、表格、视频、音频、公式几种最常......
  • VUE 3.0使用Tinymce编辑器JS报错解决
    接上篇文章写到的Tinymce编辑器,突然发现了,多点击几次编辑弹框内容就会变空白,而且JS报错了。如下图: 点开这个js就能发现错误的地方了改这两个文件就可以了,代码如下:if(typeofe.content!=='string'){e.content=e.content.innerHTML;}    这样......
  • vite+vue3项目发布到手机
    1.修改vite.config.jsexportdefaultdefineConfig({plugins:[vue(),],resolve:{alias:{'@':fileURLToPath(newURL('./src',import.meta.url))}},server:{hmr:true,host:"0.0.0.0",......
  • sanic vue-vben开发学习(一)
    兵马未动,规矩先行。开发是个系统工程,不是随便写点小代码就能交差的。需要定好规范。我认为,应当坚持以下原则。以文档为核心。良好的文档。这个完全是我自己在做,没有团队,我的团队都是甲方,提供需求的。我应当调研完毕,先写文档,计划怎么做。甚至可以把我写的调研,放在公开的网站上,......
  • 在excel表格插入标黄的这列数据 实现合并单元格,并统计单元格个数?
    大家好,我是皮皮。一、前言前几天在Python最强王者交流群【哎呦喂 是豆子~】问了一个Python自动化办公的问题,一起来看看吧。下图是他的原始数据和他想得到的目标数据,如下所示:需要在标黄的两行里边进行相关操作。二、实现过程这里【瑜亮老师】给了一个思路,groupby系统.漏洞......