安装依赖

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. Seata 四大模式详解

    分布式事务 参考文章: 分布式事务实战方案汇总 https://www.cnblogs.com/yizhiamumu/p/16625677.html 分布式事务原理及解决方案案例https://www ...

  2. CSS & JS Effect – Blue Tick Avatar

    效果 难点 难题只有一个, 那就是如何把 blue tick image 定位当 avatar 的右下角. HTML <div class="avatar-wrapper"& ...

  3. Nuxt Kit中的 Nitro 处理程序

    title: Nuxt Kit中的 Nitro 处理程序 date: 2024/9/21 updated: 2024/9/21 author: cmdragon excerpt: 摘要:本文详细介绍了 ...

  4. SXYZ-6.26模拟赛

    没有爆零,足矣. 发现绍兴一中机房的一个特点:键盘打得贼响!! T1 ctrl 啃臭键在哪里 (中文名我都不好意思大打) 第一遍测T1一分都没得啊! 这跟题目描述自相矛盾有关,导致我只是轻微考虑了一下 ...

  5. 在 macOS上安装 MongoDB 社区版

    官网教程 https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/ 使用第三方 brew package manager 在 ...

  6. DevNow: Search with Lunrjs

    前言 假期真快,转眼国庆假期已经到了最后一天.这次国庆没有出去玩,在北京看了看房子,原先的房子快要到期了,找了个更加通透一点的房子,采光也很好. 闲暇时间准备优化下 DevNow 的搜索组件,经过上一 ...

  7. SMMU中stage1 和stage2 的意思

    ARM SMMU(System Memory Management Unit)是一种用于ARM架构的内存管理单元,它支持两阶段的地址转换机制,即Stage 1和Stage 2.这种机制允许操作系统和虚 ...

  8. 好文分享 | 记一次Oracle12c数据库SQL短暂缓慢问题分析

    本文为墨天轮社区作者 张sir 原创作品,记录了日常运维Oracle数据库过程中遇到的一个慢SQL问题的解决.优化过程,文章内容全面具体.分析到位,且含有经验总结,分享给各位. 问题现象 这次出问题的 ...

  9. 简述 JavaScript脚本的执行原理?

    js 是一种动态 . 弱类型 . 基于原型的语言 ,通过浏览器可以直接执行: 当浏览器遇到 <script></script>标记时 , 会执行标记之间的js 代码:然后js ...

  10. webpack配置 alias用于方便引用文件

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...