vue实现导出Excel（自定义样式、多级表头、普通导出）

预览

背景

在做一个后台管理系统，需要做数据导出excel，于是采用了前端进行导出，前端可以根据配置字段进行数据生产excel，然后在浏览器进行下载。

使用插件exceljs

经过多方对比，最终选择用exceljs来做导出excel的工具库，因为开发着非常活跃，在这里选用的是 exceljs,支持nodejs服务端和兼容大多数浏览器导出，读写支持完美，活跃度很高，使用简单。

下载exceljs

npm install exceljs

设置导出表格数据

假设我们需要导出一个这样的表格

数据

data

	const data = []
  for(let i=0;i<100;i++){
    data.push({
      date: '2016-05-02',
      name: '王五'+i,
      price: 1+i,
      province: '上海',
      admin:"admin",
      sex:i%2?1:0,
      checked:true,
      id:i+1,
      age:0,
      city: '普陀区',
      address: '上海市普上海',
      zip: 200333
    })
  }

column

  const column = [
    { name: 'id', label: 'id', },
    { name: 'name', label: '姓名',},
    { name: 'age', label: '年龄',},
    { name: 'sex', label: '性别',},
    {   name: 'price',  label: '价格', },
    { name: 'admin', label: '账号'},
    { name: 'address', label: '地址', },
    { name: 'date', label: '日期',},
    { name: 'province', label: '省份' },
    { name: 'city', label: '城市' },
    { name: 'zip', label: '邮编' },
  ]

methods

const exportExcelAction = ()=>{
    exportExcel({
      column,
      data,
      filename:input.value||'导出 excel',
      format:format.value,
      autoWidth:true
    })
  }

代码实现

	const ExcelJS = require("exceljs");
	// 创建excel
    const workbook = new ExcelJS.Workbook();
    // 设置信息
    workbook.creator = "Me";
    workbook.title = filename;
    workbook.created = new Date();
    workbook.modified = new Date();
    // 创建工作表
    const worksheet = workbook.addWorksheet(filename);
    // 设置列名
    let columnsName = [];
    column.forEach((item,index)=>{
        let obj = {
            header: item.label, key:item.name, width: null
        }
        if(autoWidth){
            let maxArr = [autoWidthAction(item.label)]
            data.forEach(ite=>{
                let str = ite[item.name] ||''
                if(str){
                    maxArr.push(autoWidthAction(str))
                }
            })
            obj.width = Math.max(...maxArr)+5
        }
        // 设置列名、键和宽度
        columnsName.push(obj);
    })
    worksheet.columns = columnsName;
    // 添加行
    worksheet.addRows(data);
    // 写入文件

    const uint8Array =
        format === "xlsx"
            ? await workbook.xlsx.writeBuffer()
            : await workbook.csv.writeBuffer();

    const blob = new Blob([uint8Array], { type: "application/octet-binary" });
    if (window.navigator.msSaveOrOpenBlob) {
        // msSaveOrOpenBlob方法返回boolean值
        navigator.msSaveBlob(blob, filename + `.${format}`);
        // 本地保存
    } else {
        const link = document.createElement("a"); // a标签下载
        link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
        link.download = filename + `.${format}`; // dowload属性指定文件名
        link.click(); // click()事件触发下载
        window.URL.revokeObjectURL(link.href); // 释放内存
    }

在线预览展示 感兴趣的话可以给个star--》github源码地址