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

最新推荐文章于 2024-07-17 11:32:34 发布

vayne_1

最新推荐文章于 2024-07-17 11:32:34 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript excel

本文链接：https://blog.csdn.net/vayne_1/article/details/131436572

版权

使用两个库

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: