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 方式


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM