vue导出Excel模板设置单元格下拉列表

使用两个库

exceljs 用来创建Excel
file-saver 用来导出

// utils.js
/*** 传入参数说明* @param name 导出名称* @param columns 表头设置，下面有示例* @param list 表格数据，下面有示例* @param num 要设置的列数，也可以通过findIndex找出设置*/
// 封装了一个函数，直接传入值就好了
const ExcelJS = require('exceljs')
const FileSaver = require('file-saver')
export async function staff_import_template(name, columns, list, num) {const wb = new ExcelJS.Workbook()const Sheet1 = wb.addWorksheet(name) // 新建工作表，可以建多个Sheet1.columns = columns // 设置表头，(key, 宽度)// Sheet1.columns = [ // 表头格式如下//   {//     header: '编号',//     key: 'no',//     width: 20//   }, // A1//   {//     header: '姓名',//     key: 'name',//     width: 20//   }, // B2// ]// const list = [ // 表格数据格式如下//   {//     no: '1',//     name: '小红',//     sex: '女',//     sexVal: '0'//   }// ]Sheet1.addRows(list) // 设置表格数据// 表示循环1000行new Array(1000).fill(0).forEach((_, idx) => {const row = idx + 2// 渲染下拉框  参数(行，列) row表示每行 可以单独写哪一列Sheet1.getCell(row, num).dataValidation = {type: 'list',formulae: ['"male,female"'], // 下拉列表的值   ⚠一定要是外面单引号，里面双引号showErrorMessage: true // 向用户显示适当的错误消息（如果他们弄错了）// errorStyle: 'error', // 错误样式// errorTitle: 'Five', // 错误标题// error: 'The value must not be Five'， // 错误提示文本// promptTitle: 'Decimal', // // 添加“工具提示”以帮助指导用户// prompt: 'The value must between 1.5 and 7', // 工具提示文本// formulae: [15], // 指定单元格的文本长度必须小于15// formulae: [new Date(2016,0,1)] // 指定单元格必须是2016年1月1日之前的日期}})const buffer = await wb.xlsx.writeBuffer() // 创建文件流FileSaver.saveAs(new Blob([buffer]), `${name}.xlsx`) // 保存文件，使用 file-saver 库console.log(111)return
}

直接导入就可以使用了

// 引入文件
import { staff_import_template } from '@/utils/utils.js'
const that = thisif (!that.department) return that.$message.warning(that.$t('staff.tip.leftSelect'))let company = sessionStorage.getItem('currentCompany')// 表头，header设置的是表头文本，这里是国际化的，自行设置即可const tHeader = [ {header: that.$t('staff.label.number'),key: 'staffno',width: 15},{header: that.$t('staff.label.name'),key: 'name',width: 20},{header: that.$t('staff.label.gender'),key: 'sex',width: 10},{header: that.$t('staff.label.mobile'),key: 'phone',width: 15},{header: that.$t('staff.label.company_col'),key: 'company',width: 30},{header: that.$t('staff.label.department_name'),key: 'department',width: 30},{header: that.$t('staff.label.ic_card'),key: 'iccard',width: 25},{header: that.$t('staff.label.id_card'),key: 'idcard',width: 25},{header: that.$t('staff.label.state'),key: 'state',width: 25},{header: that.$t('staff.label.site'),key: 'site',width: 25},{header: that.$t('staff.label.email'),key: 'email',width: 20},{header: that.$t('staff.label.nickname'),key: 'nickname',width: 20},{header: that.$t('staff.label.Emergency_Name'),key: 'emergencyName',width: 20},{header: that.$t('staff.label.Emergency_Contact_No'),key: 'emergencyContactNo',width: 15},]// 表格数据，属性名按照表头设置的key设置const list = [{staffno: '001',name: that.$t('staff.label.wang'),sex: 'male',phone: '13666666666',company: company,department: this.department,iccard: '440305201912017117',idcard: '440305201912016236',state: 'Hubei',site: 'Optics Valley Road',email: '3452651585@qq.com',nickname: that.$t('staff.label.nickname'),emergencyName: '',emergencyContactNo: '18888888888',}]
// 执行函数
staff_import_template('员工导入模板', tHeader, list, 3)

到这里就可以实现了，有问题可以交流~

vue导出Excel模板设置单元格下拉列表相关推荐

html导出excel合并单元格,JS导出EXCEL,动态设置单元格格式，合并单元格(横向或纵向)等操作...
参考链接: https://blog.csdn.net/weixin_33724046/article/details/89611397 https://www.cnblogs.com/lvsk/p/ ...
POI导出excel并设置单元格样式和单元格内容中文自适应
本案例生产环境真是案例POI导出: 开发环境:idea+mybaits3+spring4+springmvc4+maven3+mysql5.7 poi依赖: <dependency>< ...
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
之前写过一篇博客,是关于elementUi-table组件+xlsx插件实现导出--sheetJs的,之前实现的功能有: 根据dom获取内容创建工作簿调整单元格的宽度实现百分数的展示插入到工作 ...
Java POI 导出Excel，设置单元格无法编辑，开启工作表保护后，依然可以筛选，冻结行列不移动
1. 设置单元格无法编辑 // 单元格样式锁定不可编辑 CellStyle lockStyle = workbook.createCellStyle(); lockStyle.setLocked(t ...
vue 导出excel，合并单元格，修改样式
1. 安装 npm i file-saver npm i xlsx npm i xlsx-style 如果运行中报错在\node_modules\xlsx-style\dist\cpexcel.js ...
laravel导出excel并设置单元格格式
$list = $this->recommend($request); $data = array(); foreach($list as $k=>$v){$data[] = array_ ...
java导出excel如何设置单元格样式为文本样式
[color=green][b][size=medium]//新增的四句话,设置CELL格式为文本格式 HSSFCellStyle cellStyle2 = demoWorkBook.createCe ...
php单元格字体颜色,PHPExcel API接口用法大全，按模板导入excel，美化excel，导出图片，设置单元格字体颜色背景色边框，合并单元格，设置行高列宽...
PHPExcel API接口用法大全,按模板导入excel,美化excel,导出图片,设置单元格字体颜色背景色边框,合并单元格,设置行高列宽 2020-08-31 85 一:读取excel表模板$ph ...
Java 利用hutool工具实现导出excel并合并单元格
Java 利用hutool工具实现导出excel并合并单元格 controller层调用service,就一个核心方法,没错就下面这个代码就能实现了.前提是项目里面要引用hutool包.把我这个复制到 ...

vue导出Excel模板设置单元格下拉列表

使用两个库

vue导出Excel模板设置单元格下拉列表相关推荐

最新文章

热门文章