使用vue根据表格内容生成Excel表格并下载

安装file-saver

npm install file-saver -S    

安装 xlsx

 npm install xlsx -S     

按照element

npm i element-ui -S

mian里引入element

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

在页面引入file-saver以及 xlsx

import FileSaver from "file-saver"
import *as XLSX from "xlsx"

假设现在要把id为selectTable1的表格导出

<template><div><el-table  id="selectTable1":data="tableData" borderstyle="width: 100%"><el-table-columnfixedprop="date"label="日期"width="150"></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column></el-table><button @click="exportExcel">导出</button></div>
</template>

getExcel方法 第一个参数是选择导入的id元素,

    // 格式化数据getExcel(dom,title){var wb=XLSX.utils.table_to_book(document.querySelector(dom));let wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});console.log(wbout)try {FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"数据导出.xlsx");} catch (e) {if (typeof consloe !== undefined) {Message.error({message: e.wbout,type: "error",});}}return wbout;},//点击导出方法exportExcel(){this.getExcel("#selectTable1","导出的自定义标题")}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/776384.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NLP深入学习:结合源码详解 BERT 模型(三)

文章目录 1. 前言2. 预训练2.1 modeling.BertModel2.1.1 embedding_lookup2.1.2 embedding_postprocessor2.1.3 transformer_model 2.2 get_masked_lm_output2.3 get_next_sentence_output2.4 训练 3. 参考 1. 前言 前情提要&#xff1a; 《NLP深入学习&#xff1a;结合源码详…

PyQt5开发——QCheckBox 复选框用法与代码示例

1. 复选框 QCheckBox 是 Qt 框架中的一个控件&#xff0c;用于在界面中表示一个可以被选中或取消选中的复选框。它通常用于允许用户在多个选项之间进行选择。在 Python 中使用 PyQt 或 PySide 开发 GUI 应用程序时&#xff0c;可以使用 QCheckBox 控件来实现复选框。 2.基本用…

[ Linux ] git工具的基本使用(仓库的构建,提交)

1.安装git yum install -y git 2.打开Gitee&#xff0c;创建你的远程仓库&#xff0c;根据提示初始化本地仓库&#xff08;这里以我的仓库为例&#xff09; 新建好仓库之后跟着网页的提示初始化便可以了 3.add、commit、push三板斧 git add . //add仓库新增&#xff08;变…

企业数字化转型:聊聊数据思维!

笔者曾在《深入聊一聊企业数字化转型这个事儿》 一文中给出了数字化转型的定义&#xff0c;即&#xff1a;通过应用数字化技术来重塑企业的信息化环境和业务过程。本质上来讲&#xff0c;企业数字化转型&#xff0c;不仅是技术方面的升级&#xff0c;更是企业文化、思维方式的转…

【计算机考研】408到底有多难?

你真以为大家是学不会408吗&#xff1f; 不是&#xff01;单纯是因为时间不够&#xff01;&#xff01;&#xff01; 再准确一些就是不会分配时间 408的知识其实并不难&#xff0c;要说想上130那确实有难度&#xff0c;但是100在时间充裕的情况下还是可以做到的 我本人是双…

非wpf应用程序项目【类库、用户控件库】中使用HandyControl

文章速览 前言参考文章实现方法1、添加HandyControl包;2、添加资源字典3、修改资源字典内容坚持记录实属不易,希望友善多金的码友能够随手点一个赞。 共同创建氛围更加良好的开发者社区! 谢谢~ 前言 wpf应用程序中,在入口项目中存在App.xaml文件,在这个文件中加上对各个…

Linux之进程控制进程终止进程等待进程的程序替换替换函数实现简易shell

文章目录 一、进程创建1.1 fork的使用 二、进程终止2.1 终止是在做什么&#xff1f;2.2 终止的3种情况&&退出码的理解2.3 进程常见退出方法 三、进程等待3.1 为什么要进行进程等待&#xff1f;3.2 取子进程退出信息status3.3 宏WIFEXITED和WEXITSTATUS&#xff08;获取…

全球首位AI程序员Devin诞生,以此谈谈AI对程序员的影响

一、简介 全球首位 AI 程序员 Devin 是由初创公司 Cognition AI 创造的。这家公司成立仅四个月&#xff0c;却已经引起了广泛关注。 Devin作为人工智能的代表&#xff0c;将展示出人工智能在编程领域的潜力和能力&#xff0c;激发程序员探索和应用人工智能技术的兴趣。这将可…

NanoMQ的安装与部署

本文使用docker进行安装&#xff0c;因此安装之前需要已经安装了docker 拉取镜像 docker pull emqx/nanomq:latest 相关配置及密码认证 创建目录/usr/local/nanomq/conf以及配置文件nanomq.conf、pwd.conf # # # # MQTT Broker # # mqtt {property_size 32max_packet_siz…

6、ChatGLM3-6B 部署实践

一、ChatGLM3-6B介绍与快速入门 ChatGLM3 是智谱AI和清华大学 KEG 实验室在2023年10月27日联合发布的新一代对话预训练模型。ChatGLM3-6B 是 ChatGLM3 系列中的开源模型&#xff0c;免费下载&#xff0c;免费的商业化使用。 该模型在保留了前两代模型对话流畅、部署门槛低等众多…

官网怎么发布新文章,怎么在官方网站上发布新内容

随着企业和组织越来越重视官方网站的建设和更新&#xff0c;发布新内容成为了官方网站管理的重要一环。本文将探讨在官方网站上发布新内容的步骤和方法&#xff0c;以及如何确保发布的内容质量和效果。 1. 确定发布内容 在发布新内容之前&#xff0c;首先需要确定发布的内容。…

精品凉拌菜系列热卤系列课程

这一系列课程涵盖精美凉拌菜和美味热卤菜的制作技巧。学员将学习如何选材、调味和烹饪&#xff0c;打造口感丰富、色香俱佳的菜肴。通过实践训练&#xff0c;掌握独特的烹饪技能&#xff0c;为家庭聚餐或职业厨艺提升增添亮点。 课程大小&#xff1a;6.6G 课程下载&#xff1…

windows安装R4.3.3

官网地址The Comprehensive R Archive Network 下载后得到exe安装&#xff0c;默认安装到了C:\Program Files\R&#xff0c; 因为之前已经安装了4.2.3&#xff0c;所以新建了文件夹为4.3.3&#xff0c;两者互不干扰 安装完毕后&#xff0c;打开rstudio&#xff0c;设置 然后重…

基于springboot+vue+Mysql的酒店管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

C++入门:类和对象(上)

类和对象重点解析 1.类的定义1.类的访问限定符及封装1.C实现封装的方式2.访问限定符注意 3.封装 2.类对象模型2.1类对象存储方式2.2类对象的大小2.2.1结构体内存对齐原则2.2.2为什么要内存对齐 3.this指针3.1this指针的引出3.2this指针的特性3.3this指针的存储3.4this指针可以为…

如何安全地添加液氮到液氮罐中

液氮是一种极低温的液体&#xff0c;它在许多领域广泛应用&#xff0c;但在处理液氮时需谨慎小心。添加液氮到液氮罐中是一个常见的操作&#xff0c;需要遵循一些安全准则以确保操作人员的安全和设备的完整性。 选择合适的液氮容器 选用专业设计用于存储液氮的容器至关重要。…

UEDITOR WORD图片转存交互

1.下载示例&#xff1a; Word一键粘贴控件-示例-泽优软件 2.复制WordPaster插件目录 3.引入插件文件 注意&#xff1a;不要重复引入jquery&#xff0c;如果您的项目已经引入了jq&#xff0c;则不用再引入jq-1.4 4.在工具栏中增加插件按钮 6.初始化控件 注意&#xff1a; 1.如…

专业文件翻译,笔译翻译公司推荐!

在全球化的大潮中&#xff0c;文件翻译已然成为了商业、法律、科技、文化等诸多领域的核心纽带。特别是在商业交往、合同签订、技术交流等方面&#xff0c;一份高质量的译文往往关乎着合作的成败。而在这其中&#xff0c;专业的文件翻译公司更是扮演着至关重要的角色。它们不仅…

C语言例4-33:求调和级数中第多少项的值大于10

代码如下&#xff1a; //求调和级数中第多少项的值大于10 //调和级数的第n项为11/21/3...1/n #include<stdio.h> #define LIMIT 10 int main(void) {int n1;float sum0.0;for(;;) //死循环&#xff0c;或者while&#xff08;1&#xff09;{sumsum1.0/n;if(sum&g…

软件测试工作规范、流程规范

1. 制定规则 为了规范测试工作、减少开发与测试之前的沟通成本、保证项目进度、提高软件质量&#xff0c;测试组起草了这份软件测试工作规范。 1.1. 编码规范 软件程序开发需要遵守编码规范&#xff0c;一是可以减少代码的维护成本&#xff0c;提高开发工作效率&#xff1b;…