Vue实现在线编辑excel

目录luckysheet1.插件引入2.声明excel在线预览编辑组件3.excelJs分解Dom为excel文件流luckysheet文档地址exceljs文档地址前言介绍：原先平台没有要求在线编辑excel功能，excel文件是表单新增记录展现表格信息的一条记录信息，用于展示excel文件名称，支持下载功能，后续可能是客户嫌弃文件下载网速过慢，所以要求支持在线预览和编辑功能。项目周会讨论时提到

杀猪刀-墨林

18079人浏览 · 2021-07-01 10:15:35

杀猪刀-墨林 · 2021-07-01 10:15:35 发布

luckysheet

1.插件引入

2.声明excel在线预览编辑组件

3.excelJs分解Dom为excel文件流

luckysheet文档地址

exceljs文档地址

前言介绍：原先平台没有要求在线编辑excel功能，excel文件是表单新增记录展现表格信息的一条记录信息，用于展示excel文件名称，支持下载功能，后续可能是客户嫌弃文件下载网速过慢，所以要求支持在线预览和编辑功能。项目周会讨论时提到这个需求，我当时的第一反应是这个功能前端来做的话，从18年开始网上生态情况，开源插件很少，功能支持完善较好的似乎都是收费的，所以当时会议就说明，实现这个功能就两种情况，公司对这个项目平台能不能支持收费插件，不能的话只能做网上找开源做阉割版。后续讨论，对这个功能采取使用不收费的插件。

，那能怎么办，作为开发那就是搬轮子造轮子呗，网上文档查询一波，发现2021了关于这方面的技术方案和开源插件都友好很多，点进来的小伙伴如果公司支持收费插件的话，可以试试这几个方案

wpsJs、石墨文档、腾讯文档、spreedJs

luckysheet

官方示例项目地址： Luckysheet: 🚀Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

这里后面我就直接贴代码了，因为前言时说了，在线编辑预览是新增功能，所以花费时间和改动地方越少越好，原先excel文件导出功能是后台java根据模板接口返回文件流，然后前端转换二进制Blob数据对象导出的，这里功能接入就前端做下改动，没要求后端跟着同步照着luckysheet官方给出的方案做在线编辑功能。

1.插件引入

Vue引入luckysheet，index.html头部标签head中引入

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/assets/iconfont/iconfont.css' />
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@2.1.12/dist/luckysheet.umd.js"></script>

然后package.json中添加两项依赖

"exceljs": "^4.2.0",
"luckyexcel": "^1.0.0",

2.声明excel在线预览编辑组件

<template>
  <div class="onlineExcel">
    <el-card block fill shadow="never" :body-style="{ height: '100%' }">
      <div class="fill flex-column">
        <!-- 自定义操作栏 -->
        <div class="flex-h fn-flex mar-b-xs">
          <div class="fn-header__btn text-left">
            <el-button
              type="primary"
              :disabled='this.fileurl.length === 0'
              @click="SaveExcel"
              >保存
            </el-button>
          </div>
        </div>
        <div
          id="luckysheet"
          class="flex-1 "
        ></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import LuckyExcel from 'luckyexcel';
import { uploadDoc, downloadDoc } from '@/api/doc';
import { saveParameter } from '@/views/ParameterManage/request';
import exportExcel from './export.js';

export default {
  name: 'onlineExcel',
  data() {
    return {
      filename: '',
      attach: {},
      fileurl: '',
      row: {},
    };
  },
  created() {
    this.row = JSON.parse(this.$route.query.row);
    const { id } = this.row.attach || {};
    const { name } = this.row || {};
    this.filename = name;
    if (id) this.getData(id);
  },
  methods: {
    // 获取数据
    getData(id) {
      downloadDoc(id).then((response) => {
        const fileBlob = new Blob([response.data], { type: 'application/x-xls' });
        this.fileurl = window.URL.createObjectURL(fileBlob);
        const name = this.filename || decodeURI(response.headers['content-disposition']).split('=')[1];
        this.bindExcel(this.fileurl, name);
      });
    },
    // 数据绑定
    bindExcel(value, name = '测试数据') {
      LuckyExcel.transformExcelToLuckyByUrl(value, name, (exportJson) => {
        if (exportJson.sheets === null || exportJson.sheets.length === 0) {
          this.$message.warning('无法读取excel文件的内容，目前不支持xls文件，仅支持xlsx类型!');
          this.$nextTick(() => {
            window.luckysheet.create({
              container: 'luckysheet',   // 设定DOM容器的id
              lang: 'zh', // 设定表格语言
              showinfobar: false,
            });
          });
          return;
        }
        window.luckysheet.destroy();
        this.$nextTick(() => {
          window.luckysheet.create({
            container: 'luckysheet', // luckysheet is the container id
            lang: 'zh', // 设定表格语言
            row: 100, // 默认500行
            showinfobar: false,
            data: exportJson.sheets,
            // title: exportJson.info.name,
            // userInfo: exportJson.info.name.creator,
          });
        });
      });
    },
    // 保存
    SaveExcel() {
      const fileName = this.filename.split('.')[0];
      // console.log(window.luckysheet.getAllSheets());
      exportExcel(window.luckysheet.getAllSheets(), fileName || '下载').then((file) => {
        uploadDoc({ folderId: new Date().getTime() }, file)
          .then((response) => {
            const { data, msg, code } = response.data; // 无sucess
            if (code === 200) {
              const { id, type, beginDate, endDate, typeText } = this.row;
              const form = {
                typeText,
                name: data[0].name.split('.')[0],
                attachId: data[0].id,
                type,
                beginDate,
                endDate,
              };
              saveParameter(id, form).then((res) => {
                const { code, msg } = res.data || {};
                this.$message[code === 200 ? 'success' : 'warning'](msg);
                if (code === 200) {
                  localStorage.setItem('saveExcel', JSON.stringify({
                    date: Date.now(),
                  }));
                }
              });
            } else {
              this.$message.warning(msg);
            }
          })
          .catch(() => {
            this.$message.warning('保存失败！');
          });
      });
    },
  },
};
</script>

<style lang='scss' scoped>
::v-deep{
  .luckysheet_info_detail_back, .luckysheet_info_detail{
    display: none!important;
  }
}
.onlineExcel{
  width: 100%;
  height: 100%;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

介绍上面自定义函数名作用，downloadDoc函数是请求接口返回excel文件流，然后将文件流转换为Blob二进制对象并解析出文件地址传递给luckysheet插件进行渲染。

渲染功能完成后，要开始进行编辑保存了，luckysheet官方给出的编辑保存功能在我这里有点不适用，所以做了函数封装改造，

exportExcel是封装的Dom解析成excel文件流数据作为上传文件传递给uploadDoc函数，用于excel文件重新上传，然后将此上传后返回的文件Id重新绑定到列表记录中去，saveParameter是用于编辑保存列表信息的函数。

3.excelJs分解Dom为excel文件流

/* eslint-disable */

// 文档 https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md
const Excel = require('exceljs');

function setMerge(luckyMerge = {}, worksheet) {
  const mergearr = Object.values(luckyMerge);
  mergearr.forEach((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,
    );
  });
}

/**
 * @description 配置项设置
 * @param {*} configs
 * @param {*} worksheet
 * @returns
 */
function setConfig(configs, worksheet) {
  /**
   *  @description luckysheet表格配置项
   *  "rowlen":{}, 表格行高
   *  "columnlen":{}, 表格列宽
   *  "rowhidden":{}, 隐藏行
   *  "colhidden":{}, 隐藏列
   *  "authority":{}, 工作表保护
   */
  // console.log(configs, Object.keys(configs.rowlen), Object.keys(configs.columnlen));
  // 设置隐藏行
  if (configs.rowhidden) {
    Object.keys(configs.rowhidden).forEach((val) => {
      const row = worksheet.getRow(Number(val)+1);
      row.hidden = true;
    });
  }
  // 设置隐藏列
  if (configs.colhidden) {
    Object.keys(configs.colhidden).forEach((val) => {
      const col = worksheet.getColumn(Number(val)+1);
      col.hidden = true;
    });
  }
  // 设置显示行
  if (configs.rowlen) {
    Object.keys(configs.rowlen).forEach((val) => {
      // 获取一个行对象。如果尚不存在，则将返回一个新的空对象
      const row = worksheet.getRow((Number(val) + 1));
      // console.log(configs.rowlen[val]);
      // 设置特定的行高
      row.height = configs.rowlen[val] - 10;
    });
  }

  // 设置显示列
  if (configs.columnlen) {
    Object.keys(configs.columnlen).forEach((val) => {
      // 通过键，字母和基于1的列号访问单个列
      const col = worksheet.getColumn((Number(val) + 1));
      // 设置特定的行高
      col.width = (configs.columnlen[val] + 2) / 8;
    });
  }
}

/**
 * @description 表格样式
 * @param {*} borderType
 * @param {*} style
 * @param {*} color
 * @returns
 */
function borderConvert(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;
  }
  return border;
}

/**
 *
 * @param {*} borders
 * @param {*} row_index
 * @param {*} col_index
 * @returns
 */
function addborderToCell(borders) {
  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',
    },
  };
  Object.keys(borders).forEach((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 addCellImages(images, workbook, worksheet) {
  // 通过 base64  将图像添加到工作簿
  Object.keys(images).forEach((el) => {
    const myBase64Image = images[el];
    const imageId2 = workbook.addImage({
      base64: myBase64Image.src,
      extension: 'png',
    });
    worksheet.addImage(imageId2, {
      tl: { col: myBase64Image.fromCol, row: myBase64Image.fromRow },
      br: { col: myBase64Image.toCol, row: myBase64Image.toRow },
      editAs: 'oneCell', // undefined, oneCell, absolute
      // ext: { width: 500, height: 200 },
    });
  });
}

/**
 * @description 设置边框
 * @param {*} luckyBorderInfo
 * @param {*} worksheet
 * @returns
 */
function setBorder(luckyBorderInfo, worksheet) {
  if (!Array.isArray(luckyBorderInfo)) return;
  luckyBorderInfo.forEach((elem) => {
    // 现在只兼容到borderType 为range的情况
    if (elem.rangeType === 'range') {
      const border = borderConvert(elem.borderType, elem.style, elem.color);
      const rang = elem.range[0];
      const { row, column } = rang;
      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') {
      const { col_index: colIndex, row_index: rowIndex } = elem.value;
      const borderData = Object.assign({}, elem.value);
      delete borderData.col_index;
      delete borderData.row_index;
      const border = addborderToCell(borderData, rowIndex, colIndex);
      // console.log('bordre', border, borderData)
      worksheet.getCell(rowIndex + 1, colIndex + 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
  });
}

/**
 * @description 背景色填充
 * @param {*} bg
 * @returns
 */
function fillConvert(bg) {
  if (!bg) {
    return {};
  }
  // const bgc = bg.replace('#', '')
  const fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: bg.replace('#', '') },
  };
  return fill;
}

/**
 * @description 字体设置
 * @param {*} ff
 * @param {*} fc
 * @param {*} bl
 * @param {*} it
 * @param {*} fs
 * @param {*} cl
 * @param {*} ul
 * @returns
 */
function fontConvert(
  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: (num) => 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;
}

/**
 * @description 单元格排列方式
 * @param {*} vt
 * @param {*} ht
 * @param {*} tb
 * @param {*} tr
 * @returns
 */
function alignmentConvert(
  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;
}

/**
 * @description 单元格创建
 * @param {*} n
 * @returns
 */
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;
}

/**
 * @description 设置单元格格式，样式和值
 * @param {*} cellArr
 * @param {*} worksheet
 * @returns
 */
function setStyleAndValue(cellArr, worksheet) {
  if (!Array.isArray(cellArr)) return;
  cellArr.forEach((row, rowid) => {
    row.every((cell, columnid) => {
      if (!cell) return true;
      const fill = fillConvert(cell.bg, cell.mc);

      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.v;
      }
      //  style 填入到_value中可以实现填充色
      const letter = createCellPos(columnid);
      const target = worksheet.getCell(letter + (rowid + 1));
      Object.keys(fill).forEach(() => {
        target.fill = fill;
      });
      target.font = font;
      target.alignment = alignment;
      target.value = value;
      return true;
    });
  });
}

export default function exportExcel(luckysheet, value) {
  // 参数为luckysheet.getluckysheetfile()获取的对象
  // 1.创建工作簿，可以为工作簿添加属性
  const workbook = new Excel.Workbook();
  // 2.创建表格，第二个参数可以配置创建什么样的工作表
  if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
    luckysheet = [luckysheet];
  }
  luckysheet.forEach((table) => {
    if (table.data.length === 0) return true;
    // ws.getCell('B2').fill = fills.
    // console.log(table, '+++++++++++');
    const worksheet = workbook.addWorksheet(table.name);
    const merge = (table.config && table.config.merge) || {};
    const borderInfo = (table.config && table.config.borderInfo) || {};
    const configs = table.config  || {};
    // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
    // 创建单元格并计算单元格内部内容样式及格式
    setStyleAndValue(table.data, worksheet);
    // 是否包含除merge和borderInfo外的luckysheet多余配置项
    if (Object.keys(configs).length > 2) setConfig(configs, worksheet);
    // 合并单元格
    setMerge(merge, worksheet);
    // 计算单元格自身样式
    setBorder(borderInfo, worksheet);
    // 是否包含图片
    if (table.images) addCellImages(table.images, workbook, worksheet);
    return true;
  });

  // 4.写入 buffer
  const buffer = new Promise((resolve) => {
    workbook.xlsx.writeBuffer().then(data => {
      const blob = new Blob([data], {
        type: 'application/vnd.ms-excel;charset=utf-8',
      });
      const File = new window.File([blob], `${value}.xlsx`, { type: 'application/vnd.ms-excel;charset=utf-8' });
      File.uid = File.size + new Date().getTime(); // 文件大小+时间戳
      resolve(File);
      // console.log('导出成功！');
      // FileSaver.saveAs(blob, `${value}.xlsx`);
    });
  });
  return buffer;
}

应邀，附上uploadDoc函数

const uploadDoc = (form = {}, file, option) => {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folderId', form.folderId);
    formData.append('fileName', form.fileName || '');
    formData.append('path', form.path || '');
    return axios({
      url: 'attach/upload',
      method: 'post',
      data: formData,
      timeout: 0,
      ...option,
    })
};

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^