在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的需求 ...
随机推荐
- .net7(.net core) 依赖注入:从 AddSingleton 注册的类里面访问 AddScoped 的问题
记录一下以免忘记. 今天从NopCommerce开源项目里面把它的任务调度类拆出来到我的项目用的时候,发现报错,报错信息如下 Some services are not able to be cons ...
- Wordpress 建立公司网站
1. 先安装好wordpress wordpress 6.4.2-php8.1-fpm-alpine php8.1 Login to wordpress http://www.hei-ya.com/w ...
- 从Linq的Where方法理解泛型、委托应用场景
最近遇到了一个问题,Linq的Where里面传递的是什么?Where的功能是什么实现的?没有第一时间答上来,在整理相关资料后决定自行实现Linq的Where方法来加深印象. 什么是泛型 指在 ...
- .NET 多版本 WinForm 开源控件库 SunnyUI
前言 给大家推荐一款开源的 Winform 控件库,可以帮助我们开发更加美观.漂亮的 WinForm 界面. 项目介绍 SunnyUI.NET 是一个基于 .NET Framework 4.0+..N ...
- CSS – 冷知识 (新手)
<img> extra 4px at the bottom 参考: Extra 4px at the bottom of html <img> The mysterious 4 ...
- MybatisPlus——DML编程控制——增删改
DML编程控制 id生成策略控制 不同的表应用不同的id生成策略 日志:自增(1,2,3,4,......) 购物订单:特殊规则(FQ23948AK3843) 外卖单:关联地区日期等信息(10 04 ...
- 【赵渝强老师】什么是Spark SQL?
一.Spark SQL简介 Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个编程抽象叫做DataFrame并且作为分布式SQL查询引擎的作用. 为什么要学习Spark SQL? ...
- 4.2 等差数列及其前n项和
\(\mathbf{{\large {\color{Red} {欢迎到学科网下载资料学习}} } }\)[[高分突破系列]高二数学下学期同步知识点剖析精品讲义! \(\mathbf{{\large { ...
- MobileNet V2中InvertedResidual实现
1.为了方便理解其本身结构,找到源码理解一下. 2.论文地址:http://arxiv.org/pdf/1801.04381.pdf 3.V2相比较V1增加了倒残差结构和线性瓶颈层.整个结构按照维度来 ...
- 1. react项目【前端】+C#【后端】从0到1
1.创建前端基础框架 1.1 前端创建 软件: 1.1.1 npx create-react-app pc ps:pc 是文件名 : 1.1.2 npm start 启动项目 2.创建后端基础框架 软 ...