安装依赖

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导出表格的更多相关文章

  1. vue中使用xlsx 导出表格

         <t-table v-show="false" id="exportTab" row-key="index" :data=& ...

  2. vue中把table导出表格excel

    1.首先下载2个js,我的百度网盘有 2.安装依赖 npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 3 ...

  3. VUE中使用XLSX实现导出excel表格

    简介 项目中经常会用导出数据的场景,这里介绍 VUE 中如何使用插件 xlsx 导出数据 安装 ## 1.使用 npm 或 yarn 安装依赖(三个依赖) npm install -S file-sa ...

  4. vue中excel导入导出组件

    vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数 ...

  5. vue+element 使用Export2Excel导出表格组件

    下载表格组件是根据我自己的业务需求来封装的 使用的是vue中 xlsx 的插件,需要安装新的依赖及配置 仅供参考 不保证和你百分百匹配 安装依赖 npm install -S file-saver x ...

  6. vue 中使用 XLSX 和 xlsx-style 实现前端下载Excel表格

    import XLSX from "xlsx-style"  //ps  需要修改源码:在\node_modules\xlsx-style\dist\cpexcel.js 807行 ...

  7. vue中的iviewUI导出1W条列表数据每次只导出2000条的逻辑

    导出弹窗的html <template> <Modal v-model="exportModal" width=400 :closable="false ...

  8. Vue中使用js-xlsx导出Data数据到Excel

    需要引入的第三方JS有:export.js.xlsx.extendscript.js.xlsx.full.min.js JS太大不贴出来,放一个可下载百度云连接:https://pan.baidu.c ...

  9. VB查询数据库之导出表格——机房收费总结(四)

    在机房收费系统中,有几个窗体需要导出数据到EXCEL表格中,如:学生上机记录查询窗体.学生充值记录查询窗体.收取金额查询窗体等. 前面的几篇总结,大家建议我不要把代码写的太详细,这样,不利于读者思考, ...

  10. vue将指定区域的表格数据或element-ui中el-table的数据单笔或多笔批量导出excel

    公司在后台管理系统开发中用到了 vue+element-ui 组合的框架,但随着需求的越来越复杂,前端的工作难度也呈几何倍数递增,工作量随之增大.这不,在项目中增加一个将列表数据导出为excel的需求 ...

随机推荐

  1. .net7(.net core) 依赖注入:从 AddSingleton 注册的类里面访问 AddScoped 的问题

    记录一下以免忘记. 今天从NopCommerce开源项目里面把它的任务调度类拆出来到我的项目用的时候,发现报错,报错信息如下 Some services are not able to be cons ...

  2. Wordpress 建立公司网站

    1. 先安装好wordpress wordpress 6.4.2-php8.1-fpm-alpine php8.1 Login to wordpress http://www.hei-ya.com/w ...

  3. 从Linq的Where方法理解泛型、委托应用场景

       最近遇到了一个问题,Linq的Where里面传递的是什么?Where的功能是什么实现的?没有第一时间答上来,在整理相关资料后决定自行实现Linq的Where方法来加深印象. 什么是泛型   指在 ...

  4. .NET 多版本 WinForm 开源控件库 SunnyUI

    前言 给大家推荐一款开源的 Winform 控件库,可以帮助我们开发更加美观.漂亮的 WinForm 界面. 项目介绍 SunnyUI.NET 是一个基于 .NET Framework 4.0+..N ...

  5. CSS – 冷知识 (新手)

    <img> extra 4px at the bottom 参考: Extra 4px at the bottom of html <img> The mysterious 4 ...

  6. MybatisPlus——DML编程控制——增删改

    DML编程控制 id生成策略控制 不同的表应用不同的id生成策略 日志:自增(1,2,3,4,......) 购物订单:特殊规则(FQ23948AK3843) 外卖单:关联地区日期等信息(10 04 ...

  7. 【赵渝强老师】什么是Spark SQL?

    一.Spark SQL简介 Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个编程抽象叫做DataFrame并且作为分布式SQL查询引擎的作用. 为什么要学习Spark SQL? ...

  8. 4.2 等差数列及其前n项和

    \(\mathbf{{\large {\color{Red} {欢迎到学科网下载资料学习}} } }\)[[高分突破系列]高二数学下学期同步知识点剖析精品讲义! \(\mathbf{{\large { ...

  9. MobileNet V2中InvertedResidual实现

    1.为了方便理解其本身结构,找到源码理解一下. 2.论文地址:http://arxiv.org/pdf/1801.04381.pdf 3.V2相比较V1增加了倒残差结构和线性瓶颈层.整个结构按照维度来 ...

  10. 1. react项目【前端】+C#【后端】从0到1

    1.创建前端基础框架 1.1 前端创建 软件: 1.1.1 npx create-react-app pc ps:pc 是文件名 : 1.1.2 npm start 启动项目 2.创建后端基础框架 软 ...