在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的需求 ...
随机推荐
- .net core 负载均衡取客户端真实IP
一个网关代码(.net core 3.1),部署到负载均衡器有故障,发现获取到的客户端IP都是内网IP了,负载均衡用的是阿里云的SLB . 记录一下修改过程 在Strup.cs 中的 Configur ...
- 关于 Splay 树
前置芝士 $\LARGE {关于二叉搜索树及平衡树无聊的一大串子定义}$ 二叉搜索树(BST树) 定义 二叉搜索树是一种二叉树的树形数据结构,其定义如下: 空树是二叉搜索树. 若二叉搜索树的左子树不为 ...
- Qml 实现仿前端的 Notification (悬浮出现页面上的通知消息)
[写在前面] 经常接触前端的朋友应该经常见到下面的控件: 在前端中一般称它为 Notification 或 Message,但本质是一种东西,即:悬浮弹出式的消息提醒框. 这种组件一般具有以下特点: ...
- DOM – Dimension & Coordinate (offset, client, computed, rect)
前言 很多年前有记入过一篇 box-sizing 和 dom width. 想想也挺可悲的, 那年我是负责后端的, 却要帮着前端去学习这些知识来解决问题... 也好, 现在 full stack, 也 ...
- 基于 Session 实现短信登录
短信验证 一.基于Session 1.登录流程 1)发送验证码 用户在提交手机号后,会校验手机号是否合法,如果不合法,则要求用户重新输入手机号 如果手机号合法,后台此时生成对应的验证码,同时将验证码进 ...
- Sqoop简介安装及使用
Sqoop简介 sqoop 是 apache 旗下一款"Hadoop 和关系数据库服务器之间传送数据"的工具. 核心的功能有两个: 导入.迁入 导出.迁出 导入数据:MySQL,O ...
- PHP面试,ES
什么是Elasticsearch? Elasticsearch是一个开源的分布式搜索和分析引擎,用于存储.搜索和分析大量数据.它基于Lucene搜索引擎构建,可以快速地执行全文搜索.结构化查询.分析和 ...
- OpenAI 发布适用于 .NET 库的稳定版本
OpenAI 在 6 月发布测试版后发布了其官方 .NET 库的稳定版本.它以 NuGet 包的形式提供,支持 GPT-4o 和 GPT-4o mini 等最新模型,以及完整的 OpenAI REST ...
- android IO Prefetch源码分析
I/O Prefetcher是高通本身提供的一套优化方案,可以用在Android手机App冷启动的时候.本文基于android Q 主要分libqti-iopd.vendor.qti.hardware ...
- MySQL故障诊断常用方法手册(含脚本、案例)
当你在使用MySQL数据库时,突然遇到故障,你是否会感到迷茫? ● 数据库响应变慢.SQL慢.数据库插入出现延时-- ● 表不见了.日志出现多个断连记录-- ● 非法断电造成MySQL启动报错.同步复 ...