在線Excel的探索

初心

牢大:要不你搞個在線表格吧
我:...(這點工資配不上這個需求好吧)
算了還是搞一下吧
需求:網(wǎng)頁處理excel表格,合并單元格,可以導(dǎo)入導(dǎo)出等

選型

看了很多框架,handsontable,SheetJS,Luckysheet,最終選用了Luckysheet,這個成本最低,只是導(dǎo)出稍微麻煩

Luckysheet:Luckysheet文檔 (gitee.io)
前端基于excljs導(dǎo)出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,  //'數(shù)據(jù)透視表'
      },
      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}
    // 按開始行传惠，開始列狈孔，結(jié)束行屏歹，結(jié)束列合并（相當(dāng)于 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) {
    // 現(xiàn)在只兼容到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轉(zhuǎn)為xlsx之后，內(nèi)部存在不同的格式诅诱，都會進到富文本里校镐，即值不存在與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中可以實現(xiàn)填充色
      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;
    // 開始行 開始列 結(jié)束行 結(jié)束列
    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;
    },
  };
  // 出現(xiàn)Bug冬筒，導(dǎo)入的時候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(旋轉(zhuǎn))
  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') {
  // 對應(yīng)luckysheet的config中borderinfo的的參數(shù)
  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.創(chuàng)建工作簿，可以為工作簿添加屬性
  const workbook = new Excel.Workbook();
  // 2.創(chuàng)建表格故源，第二個參數(shù)可以配置創(chuàng)建什么樣的工作表
  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.設(shè)置單元格合并,設(shè)置單元格邊框,設(shè)置單元格樣式,設(shè)置值,導(dǎo)出圖片
    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('導(dǎo)出成功污抬！');
    // 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 文件的內(nèi)容，目前不支持 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,  //'數(shù)據(jù)透視表'
              },
              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 文件的內(nèi)容印机！')
      }
    } catch (error) {
      message.error(error)
    }

  }

  return (
    <div className="excel-online">
      <div className='title '>
        在線表格
        <Space>
          <Upload {...props}>
            <Button type='primary' icon={<UploadOutlined />}>導(dǎo)入</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;
框架文件結(jié)構(gòu)

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'
}

效果

初始
本地文件
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市门驾，隨后出現(xiàn)的幾起案子射赛，更是在濱河造成了極大的恐慌，老刑警劉巖奶是，帶你破解...
    沈念sama閱讀 219,039評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件楣责，死亡現(xiàn)場離奇詭異，居然都是意外死亡聂沙，警方通過查閱死者的電腦和手機秆麸，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來及汉，“玉大人沮趣，你說我怎么就攤上這事】浪妫” “怎么了房铭？”我有些...
    開封第一講書人閱讀 165,417評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵驻龟，是天一觀的道長。 經(jīng)常有香客問我缸匪，道長翁狐，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,868評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任凌蔬，我火速辦了婚禮露懒，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘砂心。我一直安慰自己隐锭，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 67,892評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布计贰。 她就那樣靜靜地躺著，像睡著了一般蒂窒。 火紅的嫁衣襯著肌膚如雪躁倒。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,692評論 1贊 305
  • 城市分裂傳說
    那天洒琢，我揣著相機與錄音秧秉，去河邊找鬼。 笑死衰抑，一個胖子當(dāng)著我的面吹牛象迎，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播呛踊，決...
    沈念sama閱讀 40,416評論 3贊 419
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼砾淌，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了谭网？” 一聲冷哼從身側(cè)響起汪厨，我...
    開封第一講書人閱讀 39,326評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎愉择，沒想到半個月后劫乱，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,782評論 1贊 316
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡锥涕，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年衷戈，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片层坠。...
    茶點故事閱讀 40,102評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡殖妇，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出窿春，到底是詐尸還是另有隱情拉一，我是刑警寧澤采盒，帶...
    沈念sama閱讀 35,790評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站蔚润，受9級特大地震影響磅氨，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜嫡纠，卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一烦租、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧除盏，春花似錦叉橱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0贊 22
  • 一樁弒父案窃祝，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至踱侣，卻和暖如春粪小，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背抡句。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工探膊， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人待榔。 一個月前我還...
    沈念sama閱讀 48,332評論 3贊 373
  • 代替公主和親
    正文 我出身青樓逞壁，卻偏偏與公主長得像，于是被迫代替她去往敵國和親锐锣。 傳聞我的和親對象是個殘疾皇子腌闯，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,044評論 2贊 355