在vue中使用XLSX导出表格
安装依赖
npm install file-saver xlsx -S
然后在需要的页面中引入依赖包
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
下面就是导出的方法
// 导出
handle_export() {
var xlsxParam = {
raw: true
}; //转换成excel时,使用原始的格式,这样导出的时候数字过长不会变成科学计数法
let workbook = XLSX.utils.book_new();
let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
XLSX.utils.book_append_sheet(workbook, ws1, '已审核');
let ws2 = XLSX.utils.table_to_sheet(document.querySelector('#table2'), xlsxParam);
XLSX.utils.book_append_sheet(workbook, ws2, '上传历史');
let ws3 = XLSX.utils.table_to_sheet(document.querySelector('#table3'), xlsxParam);
XLSX.utils.book_append_sheet(workbook, ws3, '待审核');
let wbout = XLSX.write(workbook, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: 'application/octet-stream;charset=utf-8"'
}), '审核列表.xlsx');
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbOut);
}
return wbout;
}
在vue中使用XLSX导出表格的更多相关文章
- vue中使用xlsx 导出表格
<t-table v-show="false" id="exportTab" row-key="index" :data=& ...
- vue中把table导出表格excel
1.首先下载2个js,我的百度网盘有 2.安装依赖 npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 3 ...
- VUE中使用XLSX实现导出excel表格
简介 项目中经常会用导出数据的场景,这里介绍 VUE 中如何使用插件 xlsx 导出数据 安装 ## 1.使用 npm 或 yarn 安装依赖(三个依赖) npm install -S file-sa ...
- vue中excel导入导出组件
vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数 ...
- vue+element 使用Export2Excel导出表格组件
下载表格组件是根据我自己的业务需求来封装的 使用的是vue中 xlsx 的插件,需要安装新的依赖及配置 仅供参考 不保证和你百分百匹配 安装依赖 npm install -S file-saver x ...
- vue 中使用 XLSX 和 xlsx-style 实现前端下载Excel表格
import XLSX from "xlsx-style" //ps 需要修改源码:在\node_modules\xlsx-style\dist\cpexcel.js 807行 ...
- vue中的iviewUI导出1W条列表数据每次只导出2000条的逻辑
导出弹窗的html <template> <Modal v-model="exportModal" width=400 :closable="false ...
- Vue中使用js-xlsx导出Data数据到Excel
需要引入的第三方JS有:export.js.xlsx.extendscript.js.xlsx.full.min.js JS太大不贴出来,放一个可下载百度云连接:https://pan.baidu.c ...
- VB查询数据库之导出表格——机房收费总结(四)
在机房收费系统中,有几个窗体需要导出数据到EXCEL表格中,如:学生上机记录查询窗体.学生充值记录查询窗体.收取金额查询窗体等. 前面的几篇总结,大家建议我不要把代码写的太详细,这样,不利于读者思考, ...
- vue将指定区域的表格数据或element-ui中el-table的数据单笔或多笔批量导出excel
公司在后台管理系统开发中用到了 vue+element-ui 组合的框架,但随着需求的越来越复杂,前端的工作难度也呈几何倍数递增,工作量随之增大.这不,在项目中增加一个将列表数据导出为excel的需求 ...
随机推荐
- mybatis-plus批量增加、批量修改样例+建表语句+postman接口
使用mybatis-plus开发中会遇到数据量多的情况下,插入和修改效率低,主要原因是"新增"和"修改"方法是对一条数据进行处理的,如果有一万条数据就会和数据库 ...
- 【YashanDB数据库】YAS-02079 archive log mode must be enabled when database is in replication mode
[标题]错误码处理 [问题分类]调整归档 [关键字]关闭归档.YAS-02079.replication mode [问题描述]执行alter database noarchivelog 关闭归档时, ...
- mysql 和 sqlalchemy 的一个测试环境
Mysql: docker run -itd --name mysql-test -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysqldocker exec ...
- 小程序云开发 Collection.watch 监听器构建和销毁
小程序云开发 Collection.watch 监听器构建和销毁 构建和销毁代码示例 // release/chatroom/index.js const db = wx.cloud.database ...
- postgre基于行数的外连接及python连接postgre数据库
外连接 左外/右外连接 左外连接:左表全部出现在结果集中,若右表无对应记录,则相应字段为NULL left join ... on 条件 右外连接:右表全部出现在结果集中,若左表无对应记录,则相应字段 ...
- 对抗生成网络(GAN)简单介绍
对抗生成网络主要由生成网络和判别网络构成,GAN在图像领域使用较多.利用生成网络生成假的图像,然后利用判别器是否能判断该图像是假的. 1.用于医学图像分割,一般我们可以利用一个U-Net网络生成分割结 ...
- 数据库周刊33丨腾讯Tbase新版本发布;“2020数据技术嘉年华”有奖话题遴选;阿里云技术面试题;APEX 实现数据库自动巡检;MYSQL OCP题库……
摘要:墨天轮数据库周刊第33期发布啦,每周1次推送本周数据库相关热门资讯.精选文章.干货文档. 热门资讯 1.中国移动国产OLTP数据库中标公告:南大金仓阿里,万里开源中兴 分获大单[摘要]近日,中国 ...
- 在 Exchange Server 中配置特定于客户端的消息大小限制
在 Exchange Server 中配置特定于客户端的消息大小限制 微软官方详细文档如下: https://learn.microsoft.com/zh-cn/exchange/architectu ...
- KubeSphere 社区双周报|2024.04.26-05.09
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...
- 在 Debian 12 上安装 KubeSphere 实战入门
老 Z,运维架构师,云原生爱好者,目前专注于云原生运维,云原生领域技术栈涉及 Kubernetes.KubeSphere.DevOps.OpenStack.Ansible 等. 前言 知识点 定级:入 ...