vue中使用Luckysheet实现Excel的导入、在线编辑、导出等功能

最新推荐文章于 2024-07-29 11:18:34 发布

鹅鹅鹅呢

最新推荐文章于 2024-07-29 11:18:34 发布

阅读量2k

点赞数 1

分类专栏：前端 html 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_67391870/article/details/123304434

版权

本文详细介绍了如何在Vue项目中利用Luckysheet进行Excel的导入、在线编辑和导出功能。首先，介绍了准备阶段，包括引入cdn文件、安装相关依赖并创建export.js。接着，讲解了创建初始Excel表格的步骤，从引入依赖到创建带数据的表格。文章还提及了导入本地Excel的方法，只需处理files数据源。最后，提到了项目的git地址供参考。

摘要由CSDN通过智能技术生成

一、准备阶段

1、在pubilic文件夹下的index.html文件中的head标签中引入Luckysheet的cdn文件

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

2、安装三个依赖（exceljs和 file-saver用来导出，luckyexcel用来处理导入数据）

 npm i -S exceljs file-saver luckyexcel

3、创建一个js文件export.js

import FileSaver from 'file-saver'
const Excel = require('exceljs')

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 { colIndex, 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