excel的导出

excel的导出是开发常见的功能，但是excel得到处都是谁导出呢？

一般情况excel都是由后端导出生成blob格式返给前端，前端进行下载，当然前端也可以自己利用数据进行excel导出，这篇文章将介绍前端导出和后端导出的一些插件使用

node端导出

1.node-xlsx

怎么使用

官网： node-xlsx - npm

根据官网，可以看到这个插件既可以生成excel,也可以对excel进行解析，这里主要讲解生成excel

(1)下载插件

npm install node-xlsx

(2)使用

引入

const xlsx = require('node-xlsx')

创建buffer

buffer = xlsx.build([{name: 'excel表名', data: 'excel数据'}], sheetOptions);

参数说明：

       sheetOptions ：为表格样式

const sheetOptions = {'!cols': [{wch: 6}, {wch: 7}]};

        data的数据格式为[{},{}] 可以传入多个对象生成多个小excel ，每个对象的数据格式

{
  name: 'excel小表名'
  data: [['一行一列数据', '一行二列数据'],
         ['二行一列数据', '二行二列数据']]
  
}

除了直接写成buffer,也可以写成文件保存在后端，给前端excel的地址进行下载

const fs = require('fs')
fs.writeFile("文件名称.xlsx", buffer, function (err) {
  if (err) {
    console.log('写入失败‘);
  } else {
    console.log("写入成功!");
  }
});

案例：

egg的写的导出excel的service类

const xlsx = require('node-xlsx')
const Service = require('egg').Service;

 const tempArr = []
 tempArr.push([...header.map(col => col.header)])

class exportFileService extends Service {
    constructor(prop) {
        super(prop);
    }


 // const column = [
 //          { header: '姓名', key: 'name', width: 30 },
 //          { header: '年龄', key: 'age', width: 30 },
 //          { header: '生日', key: 'birthday', width: 30 },
 // ];
 // data = [{name:xx, age:xx, birthday:xx}]

    toExport(column, data, filename = '导出') {
        return new Promise((reslove, reject) => {
            const { ctx } = this;
            const colArr = []
            colArr.push([...column.map(col => col.header)])
            //xlsx数据
            data.forEach(item => {
                colArr.push([...column.map(col => item[col.key])])
            })
    
            console.log(column, data, 'dada')
    
           
            const buffer = xlsx.build([{ name: '导出sheet1', data: colArr }], { '!cols': [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 },] });
            

            reslove({buffer})
         })
       
        


    }
}

module.exports = exportFileService;

egg端调用servece反给前端

  async downLoad() {
            const { ctx, service } = this;
            const { id, type } = ctx.request.body;
            let result = [],
             

            // node段请求后端接口返回数据
                const res = await ctx.service.getList.list({ id, type})
                if (res.status === 200 && res.data.length) {
                
                    result = res.data;
                }

 const header = [
     { header: '姓名', key: 'name', width: 30 },
     { header: '年龄', key: 'age', width: 30 },
     { header: '生日', key: 'birthday', width: 30 },
 ];
              
            
            // node端进行转excel
            try {
             
                let res = await service.exportExcel.toExport(header, result);
               
                ctx.set('Content-disposition', `attachment;filename=1.xlsx`);
                // 返回文件buffer
                ctx.body = res.buffer;
            } catch(err) {
                ctx.status = 500
                ctx.body = err
            }

        }

前端调用下载

         down(data) {
            axios({
                method: 'post',
                url: '/list/downLoad',
                responseType: 'blob',
                headers: {
                    'Content-Type': 'application/json',
                },
                data,
            }).then(res => {
                
                if (res.status === 200) {
                    let name = data.type === 'all' ? '全部列表' : '失败列表'
                    this.saveFile(res.data, `${name}${data.id}`);
                      )
                    
                
                }
            }).catch(error => {
               
               
            });
         }

 saveFile(file, filename) {
        const ieKit = /(?:ms|\()(ie)\s([\w\.]+)|trident|(edge|edgios|edga|edg)/i.test(window.navigator.userAgent);
        const blobData = new Blob([ file ], { type: 'application/vnd.ms-excel' });
        if (ieKit) {
            navigator.msSaveBlob && navigator.msSaveBlob(blobData, filename + '.xlsx');
        } else {
            const objectURL = window.URL.createObjectURL(blobData);
            const save_link = document.createElement('a');
            const event = document.createEvent('MouseEvents');
            save_link.href = objectURL;
            save_link.download = filename + '.xlsx';
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
            window.URL.revokeObjectURL(objectURL);
        }
    }

 2.exceljs

官网：https://github.com/exceljs/exceljs/blob/master/README_zh.md

(1) 下载

npm install exceljs

(2) 使用

直接看官网吧，因为官网写的很详细，如果去创建一个excel，怎么向一个表增加数据，api有些多，所以自己看吧，最后也是可以返回一个buffer给前端，前端下载；

其实有了buffer,再利用fs写一个文件给前端文件地址也是ok的

前端直接导出excel

1.js-export-excel

官网：GitHub - jiengsad/js-export-excel: json导出excel（纯js 支持中文） ES6 module

是一个纯js进行导出的，所以适用于vue和react，因此要注意其兼容性，ie 10+

// 直接导出文件
const ExportJsonExcel = require("js-export-excel");

var option = {};

option.fileName = "excel";

option.datas = [
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
    sheetName: "sheet",
    sheetFilter: ["two", "one"],
    sheetHeader: ["第一列", "第二列"],
    columnWidths: [20, 20],
  },
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
  },
];

var toExcel = new ExportJsonExcel(option); //new
toExcel.saveExcel(); //保存