• egg 实现下载数据,并保存成excel文件


    1.前端下载

    (1)封装工具类

    utils/exportXLSX.tsx

    import * as XLSX from 'xlsx';
    
    /**
     * 纯前端将数据导出成XLSX文件
     * @param {string} fileName 导出的XLSX文件名
     * @param {string} sheetName 导出文件的sheetName
     * @param {object} headers excel标题栏对象,如:{ name: '姓名', age: '年龄' },其interface要与数据对象相同
     * @param {object[]} data 要导出的数据对象数组
     */
    
    export function exportXLSX(
      fileName: string = 'file',
      sheetName: string = 'sheet1',
      header: object,
      data: object[],
    ) {
      // 生成workbook
      const workbook = XLSX.utils.book_new();
      // 插入表头
      const headerData = [header, ...data];
      // 生成worksheet
      const worksheet = XLSX.utils.json_to_sheet(headerData, { skipHeader: true });
      // 组装
      XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
      // 导出,就会直接下载
      XLSX.writeFile(workbook, `${fileName}.xlsx`);
    }
    

    (2)页面调用

    exportForum({ids: selectedRowKeys}).then((res) => {
      const { code, data } = res;
      if(code === 200) {
        let exportData = data.map((item:any) => {
          let o={};
          Object.keys(HeaderData).map((key) => o[key]=item[key]);
          return o;
        })
        // 下载excel文件
        exportXLSX('forum', 'forums', HeaderData, exportData);
        this.setState({selectedRowKeys: []});
      }
    })

    2.后端下载

    (1)封装工具类

    app/controller/tools.js

    'use strict';
    
    const Controller = require('egg').Controller;
    const XLSX = require('xlsx');
    
    class ToolsController extends Controller {
      async exportExcel() {
        const { ctx } = this;
      	// 获取参数
        const { header, type } = ctx.query;
        // 获取数据
        let result;
        if(type === 'forum') {
          result = await ctx.service.diary.find();
        }
    
        // 查询结果为0时直接返回
        if (result.count === 0) {
          ctx.success({
            data: { ...result },
          });
          return;
        }
    
        function pick(item, keys) {
          let o={};
          keys.map((key) => o[key]=item[key]);
          return o;
        }
    
        // 生成数据
        const data = result.rows.map(i => {
          const item = pick(i, Object.keys(JSON.parse(header)));
          return {
            ...item,
            // userGroups: item.userGroups.join(','),
          };
        });
    
        // 导出excel
        await ctx.helper.exportXLSX('forum', 'forums', JSON.parse(header), data);
      }
    }
    
    module.exports = ToolsController;
    

    (2)页面调用

    // 全部下载excel数据
    const exportAllForum = (params: object) => {
      // 伪造a标签点击
      const downloadUrl = `${BaseUrl}/tools/excel/export?header=${JSON.stringify(params['header'])}&type=${params['type']}`;
      const a = document.createElement('a');
      a.href = downloadUrl;
      a.download = 'forum';
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
    

    注意:必须是 GET 方式

  • 相关阅读:
    继续JS之DOM对象二
    js之DOM对象一
    js之DOM对象三
    jQuery基本语法
    Jquery2--属性相关的操作
    jquery之文档操作
    jQuery之jQuery扩展和事件
    Bootstrap补充
    函数式编程
    数据结构,字典
  • 原文地址:https://www.cnblogs.com/crazycode2/p/12639742.html
Copyright © 2020-2023  润新知