vue项目使用excel.js导出表格数据,设置表格下拉款,多个sheet页

505 阅读1分钟
1、下载exceljs和file-saver这两个插件 文档地址
   yarn add exceljs

   yarn add file-saver
2、引入插件
import FileSaver from 'file-saver'
import ExcelJS from 'exceljs'
3、根据数据导出表格
const EXCEL_TYPE =
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
          const workbook = new ExcelJS.Workbook();
          // 生成两个sheet页
          const worksheet1 = workbook.addWorksheet('sheet1');
          const worksheet2 = workbook.addWorksheet('sheet2');
          
          
           // 设置列
          worksheet1.columns = [
            { header: '名字', key: 'name', width: 15 },
            { header: '性别', key: 'sex', width: 10 },
            { header: '年龄', key: 'age', width: 10 }
          ]
          worksheet2.columns = [
            { header: '名字', key: 'name', width: 15 },
            { header: '性别', key: 'sex', width: 10 },
            { header: '年龄', key: 'age', width: 10 }
          ]
          
          // 需要导出的数据
          let sheetData1 = [
            {name: '小明',age: 18, sex: '男'},
            {name: '小红',age: 16, sex: '女'}
          ]
          let sheetData2 = [
            {name: '小明',age: 18, sex: '男'},
            {name: '小红',age: 16, sex: '女'}
          ]
          
          sheetData1.forEach((item, index) => {
            // 生成行数据
            worksheet1.addRow(item)
            // 设置单元格下拉值
            worksheet1.getCell(`B${index+2}`).dataValidation = {
              type: 'list',
              allowBlank: true,
              showErrorMessage: true,
              errorStyle: 'error',
              formulae: dictNameChangeArr(dictData)
            }
          })
          
          // 写入文件
          workbook.xlsx.writeBuffer().then((buffer) => {
            const blob = new Blob([buffer], { type: EXCEL_TYPE })
            FileSaver(blob, `模板.xlsx`)
          })
          
          
          // 把字典name提出出来,返回出数组
            export function dictNameChangeArr(data){
              let arr = []
              data.forEach(item => {
                arr.push(item.label)
              })
               // 这里有个坑,excel.js规定一定要用 ['"男,女"']这个格式才能生成下拉值,不然会报错
              return ["\"" + arr.join(',') + "\""]
            }