在线Excel的探索

初心

牢大:要不你搞个在线表格吧
我:...(这点工资配不上这个需求好吧)
算了还是搞一下吧
需求:网页处理excel表格,合并单元格,可以导入导出等

选型

看了很多框架,handsontable,SheetJS,Luckysheet,最终选用了Luckysheet,这个成本最低,只是导出稍微麻烦

Luckysheet:Luckysheet文档 (gitee.io)
前端基于excljs导出xlsx时图片资源的处理及踩坑实录 - 掘金 (juejin.cn)
React引入Luckysheet以及使用心得_luckysheet官方文档-CSDN博客

实践

组件LuckySheet.tsx

import { forwardRef, useEffect, useRef } from 'react';
import './index.less';

const LuckySheet = forwardRef(({ }, ref) => {
  const containerRef = useRef(null);
  function init() {
    window.luckysheet?.create({
      container: 'luckysheet',
      showinfobar: false,
      lang: 'zh',
      title: '暂无',
      showtoolbarConfig:{
        // statusbar:false, // '工作表保护'
        protection:false, // '工作表保护'
        print:false, // '打印'
        screenshot: false, // '截图'
        chart: false,
        pivotTable: false,  //'数据透视表'
      },
      cellRightClickConfig:{
        matrix: false
      },
      showsheetbarConfig:{
        add: false, //新增sheet
        menu: false, //sheet管理菜单
        // sheet: false //sheet页显示
      }
    });
  }

  useEffect(() => {
    init();
    return ()=>{
      window.luckysheet?.destroy()
    }
  }, []);

  return <div ref={containerRef} id="luckysheet" className="lucky-container" />;
});

export default LuckySheet;

//.less
.lucky-container {
  // position: absolute;
  // top: 200px;
  // left: 0px;
  width: 100%;
  // height:calc(100% -25px);
  min-height: 820px;
  margin: 0px;
  padding: 0px;
  .luckysheet-stat-area{
    background-color: transparent;
  }
  .luckysheet-scrollbar-y{
    z-index: 2;
  }
}

exceltools.ts

const Excel = require('exceljs');
import { download } from '@/utils';
var setMerge = function (luckyMerge = {}, worksheet) {
  const mergearr = Object.values(luckyMerge);
  mergearr.forEach(function (elem) {
    // elem格式：{r: 0, c: 0, rs: 1, cs: 2}
    // 按开始行，开始列，结束行，结束列合并（相当于 K10:M12）
    worksheet.mergeCells(elem.r + 1, elem.c + 1, elem.r + elem.rs, elem.c + elem.cs);
  });
};

var setBorder = function (luckyBorderInfo, worksheet) {
  if (!Array.isArray(luckyBorderInfo)) return;
  // console.log('luckyBorderInfo', luckyBorderInfo);
  luckyBorderInfo.forEach(function (elem) {
    // 现在只兼容到borderType 为range的情况
    // console.log('ele', elem)
    if (elem.rangeType === 'range') {
      const border = borderConvert(elem.borderType, elem.style, elem.color);
      const rang = elem.range[0];
      // console.log('range', rang)
      const row = rang.row;
      const column = rang.column;
      for (let i = row[0] + 1; i < row[1] + 2; i++) {
        for (let y = column[0] + 1; y < column[1] + 2; y++) {
          worksheet.getCell(i, y).border = border;
        }
      }
    }
    if (elem.rangeType === 'cell') {
      // col_index: 2
      // row_index: 1
      // b: {
      //   color: '#d0d4e3'
      //   style: 1
      // }
      const { col_index, row_index } = elem.value;
      const borderData = Object.assign({}, elem.value);
      delete borderData.col_index;
      delete borderData.row_index;
      const border = addborderToCell(borderData, row_index, col_index);
      // console.log('bordre', border, borderData)
      worksheet.getCell(row_index + 1, col_index + 1).border = border;
    }
    // console.log(rang.column_focus + 1, rang.row_focus + 1)
    // worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border = border
  });
};
var setStyleAndValue = function (cellArr, worksheet) {
  if (!Array.isArray(cellArr)) return;
  cellArr.forEach(function (row, rowid) {
    row.every(function (cell, columnid) {
      if (!cell) return true;
      const fill = fillConvert(cell.bg);
      const font = fontConvert(cell.ff, cell.fc, cell.bl, cell.it, cell.fs, cell.cl, cell.ul);
      const alignment = alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr);
      let value = '';
      if (cell.f) {
        value = { formula: cell.f, result: cell.v };
      } else if (!cell.v && cell.ct && cell.ct.s) {
        // xls转为xlsx之后，内部存在不同的格式，都会进到富文本里，即值不存在与cell.v，而是存在于cell.ct.s之后
        // value = cell.ct.s[0].v
        cell.ct.s.forEach((arr) => {
          value += arr.v;
        });
      } else {
        value = cell.m || cell.v;
      }
      //  style 填入到_value中可以实现填充色
      const letter = createCellPos(columnid);
      const target = worksheet.getCell(letter + (rowid + 1));
      // console.log(target, 'target', cell, 'cell');
      // console.log('1233', letter + (rowid + 1))
      for (const key in fill) {
        target.fill = fill;
        console.log(key);
        break;
      }
      target.font = font;
      target.alignment = alignment;
      // 处理日期
      if (target._value.model.type === 2) {
        target.value = new Date(target.value);
      }
      target.value = value;

      return true;
    });
  });
};

var setImages = function (imagesArr, worksheet, workbook) {
  if (typeof imagesArr !== 'object') return;
  for (const key in imagesArr) {
    // console.log(imagesArr[key], 'imagesArr[key]');
    // 通过 base64  将图像添加到工作簿
    const myBase64Image = imagesArr[key].src;
    // 开始行 开始列 结束行 结束列
    const start = { col: imagesArr[key].fromCol, row: imagesArr[key].fromRow };
    const end = { col: imagesArr[key].toCol + 1.5, row: imagesArr[key].toRow + 1.5 };
    const imageId = workbook.addImage({
      base64: myBase64Image,
      extension: 'png',
      // editAs: 'absolute',
      tl: start,
      br: end,
      // tl: { col: imagesArr[key].fromRow + 0.5, row: imagesArr[key].fromCol + 0.5 },
      // br: { col: imagesArr[key].toRow + 0.5, row: imagesArr[key].toCol + 0.5 },
      ext: {
        width: imagesArr[key].default.width || 200,
        height: imagesArr[key].default.height || 200,
      },
    });

    worksheet.addImage(imageId, {
      tl: start,
      br: end,
      ext: {
        width: imagesArr[key].default.width || 200,
        height: imagesArr[key].default.height || 200,
      },
    });
  }
};

var fillConvert = function (bg) {
  if (!bg) {
    return {};
  }
  // const bgc = bg.replace('#', '')
  const fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: bg.replace('#', '') },
  };
  return fill;
};

var fontConvert = function (ff = 0, fc = '#000000', bl = 0, it = 0, fs = 10, cl = 0, ul = 0) {
  // luckysheet：ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
  const luckyToExcel = {
    0: '微软雅黑',
    1: '宋体（Song）',
    2: '黑体（ST Heiti）',
    3: '楷体（ST Kaiti）',
    4: '仿宋（ST FangSong）',
    5: '新宋体（ST Song）',
    6: '华文新魏',
    7: '华文行楷',
    8: '华文隶书',
    9: 'Arial',
    10: 'Times New Roman ',
    11: 'Tahoma ',
    12: 'Verdana',
    num2bl: function (num) {
      return num !== 0;
    },
  };
  // 出现Bug，导入的时候ff为luckyToExcel的val

  const font = {
    name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
    family: 1,
    size: fs,
    color: { argb: fc.replace('#', '') },
    bold: luckyToExcel.num2bl(bl),
    italic: luckyToExcel.num2bl(it),
    underline: luckyToExcel.num2bl(ul),
    strike: luckyToExcel.num2bl(cl),
  };

  return font;
};

var alignmentConvert = function (vt = 'default', ht = 'default', tb = 'default', tr = 'default') {
  // luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
  const luckyToExcel = {
    vertical: {
      0: 'middle',
      1: 'top',
      2: 'bottom',
      default: 'top',
    },
    horizontal: {
      0: 'center',
      1: 'left',
      2: 'right',
      default: 'left',
    },
    wrapText: {
      0: false,
      1: false,
      2: true,
      default: false,
    },
    textRotation: {
      0: 0,
      1: 45,
      2: -45,
      3: 'vertical',
      4: 90,
      5: -90,
      default: 0,
    },
  };

  const alignment = {
    vertical: luckyToExcel.vertical[vt],
    horizontal: luckyToExcel.horizontal[ht],
    wrapText: luckyToExcel.wrapText[tb],
    textRotation: luckyToExcel.textRotation[tr],
  };
  return alignment;
};

var borderConvert = function (borderType, style = 1, color = '#000') {
  // 对应luckysheet的config中borderinfo的的参数
  if (!borderType) {
    return {};
  }
  const luckyToExcel = {
    type: {
      'border-all': 'all',
      'border-top': 'top',
      'border-right': 'right',
      'border-bottom': 'bottom',
      'border-left': 'left',
    },
    style: {
      0: 'none',
      1: 'thin',
      2: 'hair',
      3: 'dotted',
      4: 'dashDot', // 'Dashed',
      5: 'dashDot',
      6: 'dashDotDot',
      7: 'double',
      8: 'medium',
      9: 'mediumDashed',
      10: 'mediumDashDot',
      11: 'mediumDashDotDot',
      12: 'slantDashDot',
      13: 'thick',
    },
  };
  const template = {
    style: luckyToExcel.style[style],
    color: { argb: color.replace('#', '') },
  };
  const border = {};
  if (luckyToExcel.type[borderType] === 'all') {
    border['top'] = template;
    border['right'] = template;
    border['bottom'] = template;
    border['left'] = template;
  } else {
    border[luckyToExcel.type[borderType]] = template;
  }
  // console.log('border', border)
  return border;
};

function addborderToCell(borders, rowIndex, colIndex) {
  const border = {};
  const luckyExcel = {
    type: {
      l: 'left',
      r: 'right',
      b: 'bottom',
      t: 'top',
    },
    style: {
      0: 'none',
      1: 'thin',
      2: 'hair',
      3: 'dotted',
      4: 'dashDot', // 'Dashed',
      5: 'dashDot',
      6: 'dashDotDot',
      7: 'double',
      8: 'medium',
      9: 'mediumDashed',
      10: 'mediumDashDot',
      11: 'mediumDashDotDot',
      12: 'slantDashDot',
      13: 'thick',
    },
  };
  // console.log('borders', borders)
  for (const bor in borders) {
    // console.log(bor)
    if (borders[bor].color.indexOf('rgb') === -1) {
      border[luckyExcel.type[bor]] = {
        style: luckyExcel.style[borders[bor].style],
        color: { argb: borders[bor].color.replace('#', '') },
      };
    } else {
      border[luckyExcel.type[bor]] = {
        style: luckyExcel.style[borders[bor].style],
        color: { argb: borders[bor].color },
      };
    }
  }

  return border;
}

function createCellPos(n) {
  const ordA = 'A'.charCodeAt(0);

  const ordZ = 'Z'.charCodeAt(0);
  const len = ordZ - ordA + 1;
  let s = '';
  while (n >= 0) {
    s = String.fromCharCode((n % len) + ordA) + s;

    n = Math.floor(n / len) - 1;
  }
  return s;
}
export default function (luckysheet, value) {
  // 1.创建工作簿，可以为工作簿添加属性
  const workbook = new Excel.Workbook();
  // 2.创建表格，第二个参数可以配置创建什么样的工作表
  luckysheet.forEach(function (table) {
    console.log(table, 'table');
    if (table.data.length === 0) return true;
    const worksheet = workbook.addWorksheet(table.name);

    const merge = (table.config && table.config.merge) || {};
    const borderInfo = (table.config && table.config.borderInfo) || {};
    // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值,导出图片
    setStyleAndValue(table.data, worksheet);
    setMerge(merge, worksheet);
    setBorder(borderInfo, worksheet);
    setImages(table.images, worksheet, workbook);
    return true;
  });

  // 4.写入 buffer
  const buffer = workbook.xlsx.writeBuffer().then((data) => {
    // const blob = new Blob([data], {
    //   type: 'application/vnd.ms-excel;charset=utf-8',
    // });
    // console.log('导出成功！');
    // FileSaver.saveAs(blob, `${value}.xlsx`);
    download(data, value, 'application/vnd.ms-excel;charset=utf-8');
  });
  return buffer;
}

使用

import React, { useRef, useState } from 'react';
import LuckySheet from '@/components/LuckySheet';
import { UploadOutlined,DownloadOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { Button, message, Upload,Space } from 'antd';
import output from "@/utils/exceltool";
import './index.less';

const ExcelOnline: React.FC = () => {
  const props: UploadProps = {
    showUploadList:false,
    beforeUpload(file){
      // console.log(file)
      // if(file.status === 'done'){
        window.LuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            message.error('无法读取 excel 文件的内容，目前不支持 xls 文件！')
            return;
          }
          console.log(exportJson, luckysheetfile);
          window.luckysheet?.destroy();
          window.luckysheet?.create({
              container: 'luckysheet', //luckysheet is the container id
              showinfobar: false,
              showtoolbarConfig:{
                protection:false, // '工作表保护'
                statusbar:false, // '工作表保护'
                print:false, // '打印'
                screenshot: false, // '截图'
                chart: false,
                pivotTable: false,  //'数据透视表'
              },
              cellRightClickConfig:{
                matrix: false
              },
              // showsheetbarConfig:{
                // add: false, //新增sheet
                // menu: false, //sheet管理菜单
                // sheet: false //sheet页显示
              // },
              data: exportJson.sheets,
              title: exportJson.info.name,
              userInfo: exportJson.info.name.creator,
              lang: 'zh'
          });
        });
        return false
      // }
    },
    maxCount: 1,
    accept: '.xlsx;'
  }

  function handleSave() {
    try {
      const workbookName = window.luckysheet.getWorkbookName()
      const data = window.luckysheet?.getluckysheetfile()
      console.log(data,'data')
      if (data) {
        const fileName = workbookName ||  data.map(i=>i.name).join(',')+ '+' +new Date()
        data && output(data,fileName)
      } else {
        message.error('无法保存 excel 文件的内容！')
      }
    } catch (error) {
      message.error(error)
    }

  }

  return (
    <div className="excel-online">
      <div className='title '>
        在线表格
        <Space>
          <Upload {...props}>
            <Button type='primary' icon={<UploadOutlined />}>导入</Button>
          </Upload>
          <Button onClick={handleSave} type='primary' icon={<DownloadOutlined />}>保存</Button>
        </Space>
      </div>
      <div className="excel-online-inner">
        {/* <div className="container"> */}
          <LuckySheet/>
        {/* </div> */}
      </div>
    </div>
  );
};
export default ExcelOnline;
框架文件结构

Umi.conf

{
  ...,
  externals: {
    luckysheet: 'window.luckysheet',
    LuckyExcel: 'LuckyExcel',
  },
  scripts: [
    '/luckySheet/plugin.js',
    '/luckySheet/luckysheet.umd.js',
    '/luckySheet/luckyexcel.umd.js',
  ],
  styles: [
    '/luckySheet/iconfont.css',
    '/luckySheet/luckysheet.css',
    '/luckySheet/plugins.css',
    '/luckySheet/pluginsCss.css',
  ],
  jsMinifier: 'terser'
}

效果

初始
本地文件
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342