使用封装的exceljs导出excel文件

相信大家也是开发中遇到导出导入数据的功能，接下来给大家分享自己的小小经验。拿来用就可以。

首先安装 exceljs 包和 file-saver 包

// npm 安装exceljs命令
npm install --save exceljs file-saver

要导出的数据

页面代码

<template>
<div><div style="float: right;margin: 10px 10px"><el-button size="mini" icon="el-icon-download" @click="exportExcel" type="primary">导出</el-button></div><el-table:data="data"border:header-cell-style="{background:'#eef1f6',color:'#6480b6'}"><el-table-columnprop="name"min-width="180"align="center"label="姓名"/><el-table-columnprop="age"min-width="180"label="年龄"align="center"/><el-table-columnprop="Date"min-width="180"label="出生年月"/></el-table>
</div>
</template><script>
//引入工具方法
import { exportExcel } from "../../utils/exportExcelUtil";export default {name: "LearnOne",data(){return{data:[{name:'阿不都沙拉木',age:25,Date:'2022-10-27',sex: '男'},{name:'西热力江',age:31,Date:'2022-10-27',sex: '男'},{name:'阿迪力江',age:23,Date:'2022-10-27',sex: '男'},{name:'迪丽热巴',age:30,Date:'2022-10-27',sex: '女'},{name:'古力娜扎',age:32,Date:'2022-10-27',sex: '女'}],//表头信息以及单元格的宽度columns:[{header: '名称',key: 'name',width: 20 },{header: '年龄',key: 'age',width: 20 },{header: '出生年月',key: 'Date',width: 20 },{header: '性别',key: 'sex',width: 20}]}},methods:{exportExcel(){//把表头信息，还有导出的数据，导出的文件名传入方法里exportExcel(this.data,this.columns,'明星信息')}}
}
</script>

下面是自己封装的工具类

// 引入exceljs 包和 file-saver
const ExcelJS = require('exceljs');
const FileSaver = require('file-saver') ;
export async  function exportExcel(allEquipmentData,columns,fileName) {const wb = new ExcelJS.Workbook();//创建工作簿const Sheet1 = wb.addWorksheet('Sheet1');//表头样式let columnsFont = {name: '宋体', size: 16, color: {rgb: "000000"}, bold: true}//固定表头Sheet1.views = [{state: 'frozen', xSplit: 1, ySplit: 1,  topLeftCell: 'G10', activeCell: 'A1'}];//把传过来表头信息赋给创建的工作簿Sheet1.columns = columns//给第一行设置样式，也就是表头样式Sheet1.getRow(1).font = columnsFont//把内容信息一行一行的粘贴进去for(var i=0;i<allEquipmentData.length;i++){Sheet1.getRow(i+2).values = allEquipmentData[i]}//最后导出excel,fileName为导出的文件名字wb.xlsx.writeBuffer().then(buffer => {FileSaver.saveAs(new Blob([buffer], {type: 'application/octet-stream'}), fileName+`.xlsx`);})}

=》给大家额外的惊喜，也就是导出excel文件的同时，给某一列带上下拉框选项值。这个可以利用在导出模板上。

//这里为了不浪费资源只渲染了100一下单元格选项值
for (var i=2;i<100;i++){//这里写的Row是一行，i代表第几行。Cell是这一行的key值为sex的单元格Sheet1.getRow(i).getCell("sex").dataValidation = {type: 'list',allowBlank: true,//formulae就是下拉框选项值//这里注意字符串两边的单引号，是包围了双引号formulae: ['"男,女,不男不女"']};

2022-11-9更新内容：下拉列表值长度出现限制问题

解决方式：从工作簿中获取下拉列表值


//创建工作簿2const Sheet1 = wb.addWorksheet('Sheet1');const Sheet2 = wb.addWorksheet('Sheet2');var data = ['2022年','2023年','2024年','2025年','2026年']//给工作簿2的表头设置样式
Sheet2.getRow(1).getCell(1).value = "年份"
Sheet2.getRow(1).font = columnsFont//给工作簿2输入数据
for(let i=0;i<data.length;i++){Sheet2.getRow(i+2).getCell(1).value = data[i]}//设置选项值for (let i=2;i<1000;i++){Sheet1.getRow(i).getCell("sex").dataValidation = {type: 'list',allowBlank: true,//在这里把工作簿2中的内容选用在工作簿1中的下拉列表值中formulae: ['Sheet2!$A$2:$A$'+data.length]};}

如果觉得对你有所帮助就点个赞，有什么问题可以在评论区讨论。

使用封装的exceljs导出excel文件相关推荐

ExcelJs导出Excel文件并设置单元格样式
下载exceljs并引入数据源格式:二维数组,null值是后面要合并单元格的,占个位置. //创建对象 var wb = new ExcelJS.Workbook(); //创建一个名称为Sheet ...
vue 导出excel文件利用 excelJs插件
用excelJs导出excel文件没有咋整理发布出来是怕自己忘了咋写 exportExcel() {if (this.data.length == 0) {this.$message.error(& ...
ExcelJS 导出excel xlxs 格式【前端导出】
之前写过单纯的前端导出excel文件,但是会出现文件内容和导出格式不匹配的问题,之后又发现更好的解决方法: 利用 exceljs 导出 excel 文件,没有格式错误
java导入、导出Excel文件
一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际 ...
如何使用JavaScript实现纯前端读取和导出excel文件（转）
转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...
springboot使用jxls导出excel___（万能通用模板）--- SpringBoot导入、导出Excel文件___SpringBoot整合EasyExcel模板导出Excel
springboot使用jxls导出excel 实现思路: 首先在springBoot(或者SpringCloud)项目的默认templates目录放入提前定义好的Excel模板,然后在具体的导出接口 ...
h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
如何使用JavaScript实现纯前端读取和导出excel文件
js-xlsx 介绍由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...

使用封装的exceljs导出excel文件

相信大家也是开发中遇到导出导入数据的功能，接下来给大家分享自己的小小经验。拿来用就可以。

首先安装 exceljs 包和 file-saver 包

要导出的数据

页面代码

下面是自己封装的工具类

=》给大家额外的惊喜，也就是导出excel文件的同时，给某一列带上下拉框选项值。这个可以利用在导出模板上。

2022-11-9更新内容：下拉列表值长度出现限制问题

解决方式：从工作簿中获取下拉列表值

如果觉得对你有所帮助就点个赞，有什么问题可以在评论区讨论。

使用封装的exceljs导出excel文件相关推荐

最新文章

热门文章

使用封装的exceljs导出excel文件

相信大家也是开发中遇到导出导入数据的功能，接下来给大家分享自己的小小经验。拿来用就可以。

首先安装 exceljs 包和 file-saver 包

要导出的数据

页面代码

下面是自己封装的工具类

=》给大家额外的惊喜，也就是导出excel文件的同时，给某一列带上下拉框选项值。这个可以利用在导出模板上。

2022-11-9更新内容 ：下拉列表值长度出现限制问题

解决方式：从工作簿中获取下拉列表值

如果觉得对你有所帮助就点个赞，有什么问题可以在评论区讨论。

使用封装的exceljs导出excel文件相关推荐

最新文章

热门文章

2022-11-9更新内容：下拉列表值长度出现限制问题