vue uses Luckysheet plugin to implement excel import and export

The excel import and export library developed by Luckysheet-Luckyexcel (opens new window) has implemented the excel import function (currently only supports xslx files); supports multiple sheets

Update export border issues
Update the export type and different styles

Import usage method (only .xlsx files):

Import files (.xlsx files only)
Introduction of npmnpm install luckyexcel

Import LuckyExcel from ‘luckyexcel’

let file = ;
        if (file == null ||  == 0) {
          this.$("The file is empty, please reselect the file");
          return;
        }
        let name = file[0].name;
        let suffixArr = ("."),
          suffix = suffixArr[ - 1];
        if (suffix != "xlsx") {
          this.$("Only support xlsx files, please reselect");
          return;
        }
        (); // Destroy the current container first        (file[0], function(
          exportJson,
          luckysheetfile
        ) {
          if ( == null ||  == 0) {
            this.$("Reading the content of the excel file failed, and the xls file is not currently supported!");
            return;
          }
          ({
            container: "Container ID",
            showinfobar: false,
            data: ,
            title: ,
            userInfo: 
          });
        });

Export usage:

Export tables (support styles and multiple sheets)
Currently, there is no official export method, but there are two other ways (XLSXjs and exceljs) that can be exported. The plug-in used below is exceljs, which supports export styles (export pictures and charts have not been implemented yet)

Introducing plug-insnpm install exceljs
Implementing the code, I put it in a separate file and then call it, the code is as follows:

const Excel = require('exceljs')
async function exportSheetExcel(luckysheet, name) {
  // 1. Create a workbook, you can add attributes to the workbook  const workbook = new ();
  // 2. Create a table, the second parameter can configure what kind of worksheet to create  (function (table) {
    if ( === 0) return true;
    const worksheet = ();
    // 3. Set cell merging, set cell borders, set cell styles, and set values    setStyleAndValue(, worksheet);
    setMerge(, worksheet);
    setBorder(, worksheet);
    return true;
  })
  // 4. Write to the buffer  const buffer = await ();
  saveFile(buffer, name);
  return buffer
}

var saveFile = function (buf, name) {
  let blob = new Blob([buf], { type: 'application/;charset=utf-8' });
  const downloadElement = ('a');
  let href = (blob);
   = href;
   = name + ".xlsx"; // File name  (downloadElement);
  ();
  (downloadElement); // Download and remove elements  (href); // Release the blob object}

//Convert colorvar rgb2hex = function (rgb) {
  if ((0) == '#') {
    return rgb;
  }

  var ds = (/\D+/);
  var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]);
  return "#" + zero_fill_hex(decimal, 6);

  function zero_fill_hex(num, digits) {
    var s = (16);
    while ( &lt; digits)
      s = "0" + s;
    return s;
  };
};

var setMerge = function (luckyMerge = {}, worksheet) {
  const mergearr = (luckyMerge)
  (function (elem) { // elem format: {r: 0, c: 0, rs: 1, cs: 2}    // Press the start row, start column, end row, end column merge (equivalent to K10:M12)    ( + 1,  + 1,  + ,  + );
  })
}

var setBorder = (luckyBorderInfo, worksheet) =&gt; {
  if (!(luckyBorderInfo)) return
  ((elem) =&gt; {
    var val = elem;
    let border = {}
    const luckyToExcel = {
      type: {
        'border-top': 'top',
        'border-right': 'right',
        'border-bottom': 'bottom',
        'border-left': 'left'
      },
      style: {
        0: 'none',
        1: 'thin',
        2: 'hair',
        3: 'dotted',
        4: 'dashDot',
        5: 'dashDot',
        6: 'dashDotDot',
        7: 'double',
        8: 'medium',
        9: 'mediumDashed',
        10: 'mediumDashDot',
        11: 'mediumDashDotDot',
        12: 'slantDashDot',
        13: 'thick'
      }
    }
    
    if ( === 'range') {
      let color = (('#', '')).toUpperCase()
      if ( === 'border-all') {
        border['top'] = { style: [], color: { argb: color } }
        border['right'] = { style: [], color: { argb: color } }
        border['bottom'] = { style: [], color: { argb: color } }
        border['left'] = { style: [], color: { argb: color } }
      } else {
        border[[]] = { style: [], color: { argb: color } }
      }
      (item =&gt; {
        for (let r = [0]; r &lt; [1] + 1; r++) {
          for (let c = [0]; c &lt; [1] + 1; c++) {
            (r + 1, c + 1).border = border
          }
        }
      })
    } else if ( === 'cell') {
      border['top'] = { style: [], color: { argb: (('#', '')).toUpperCase() } }
      border['right'] = { style: [], color: { argb: (('#', '')).toUpperCase() } }
      border['bottom'] = { style: [], color: { argb: (('#', '')).toUpperCase() } }
      border['left'] = { style: [], color: { argb: (('#', '')).toUpperCase() } }
      (.row_index + 1, .col_index + 1).border = border
    }
  })
}

var setStyleAndValue = function (cellArr, worksheet) {
  if (!(cellArr)) return;

  (function (row, rowid) {
    const dbrow = (rowid + 1);
    //Set the cell row height, multiply by 1.2 times by default     = ([rowid])[rowid] * 1.2;
    (function (cell, columnid) {
      if (!cell) return true;
      if (rowid == 0) {
        const dobCol = (columnid + 1);
        //Set the cell column width divided by 8         = ([columnid])[columnid] / 8;
      }
      let fill = fillConvert();
      let font = fontConvert(, , , , , , );
      let alignment = alignmentConvert(, , , );
      let value;

      var v = '';
      if ( &amp;&amp;  == 'inlineStr') {
        var s = ;
        (function (val, num) {
          v += ;
        })
      } else {
        v = ;
      }
      if () {
        value = { formula: , result: v };
      } else {
        value = v;
      }
      let target = (rowid + 1, columnid + 1);
       = fill;
       = font;
       = alignment;
       = value;
      return true;
    })
  })
}

var fillConvert = function (bg) {
  if (!bg) {
    return {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: '#ffffff'.replace('#', '') }
    }
  }
  bg = ('rgb') &gt; -1 ? rgb2hex(bg) : bg;
  let fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: ('#', '') }
  }
  return fill
}

var fontConvert = function (ff = 0, fc = '#000000', bl = 0, it = 0, fs = 10, cl = 0, ul = 0) { // luckysheet: ff(style), fc(color), bl(bold), it(italic), fs(size), cl(strike line), ul(underline)  const luckyToExcel = {
    0: 'Microsoft Yahei',
    1: 'Song',
    2: 'Bold body (ST Heiti)',
    3: 'ST Kaiti',
    4: 'Song Song (ST FangSong)',
    5: 'New Song',
    6: 'Chinese New Wei',
    7: 'Chinese running script',
    8: 'Chinese Lishu',
    9: 'Arial',
    10: 'Times New Roman ',
    11: 'Tahoma ',
    12: 'Verdana',
    num2bl: function (num) {
      return num === 0 ? false : true
    }
  }

  let font = {
    name: ff,
    family: 1,
    size: fs,
    color: { argb: ('#', '') },
    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(vertical), ht(horizontal), tb(line wrap), tr(rotate)  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
    }
  }

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

}

export {
  exportSheetExcel
}

Call method exportSheetExcel((), "report name");

This is the article about vue using the Luckysheet plug-in to implement excel import and export. For more related vue Luckysheet excel import and export content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!