【Luckysheet+vuecli】Luckysheet的使用和如何保存文件到后端

文章介绍

• 因为官方的cdn依赖没法用，需要自己buide
• 前端我用的是vue element admin，基于vue cli搭建的。
• 后端用的C# .net core web api搭建。

资料链接

Luckysheet手册

Luckysheet的使用

依赖的生成与导入

• 下载

https://github.com/mengshukeji/Luckysheet.git

• 用vscode打开新建终端
  
• 输入以下命令

npm install
npm install gulp -g
npm run dev
npm run build

• 将生成的dist文件夹下的除了index所有文件复制到项目目录pubulic下面
  
• 再自己vue项目，pubulic/Index文件添加luckysheet依赖

<!-- 导入Luckysheet -->
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

使用luckysheet

• 新建一个页面，因为我用的是vue element admin的框架，如果你们用的其他vue，新建一个新的vue页面就行。

<template>
  <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 20px;" />
</template>

<script>

export default {
  data() {
    return {
    }
  },
  mounted() {
    // In some cases, you need to use $nextTick
    // this.$nextTick(() => {
    // eslint-disable-next-line no-undef
    $(function() {
      window.luckysheet.create({
        container: 'luckysheet', // 设定DOM容器的id
        title: '测试Excel', // 表 头名
        lang: 'zh', // 中文
        showinfobar: false, // 是否显示顶部信息栏
        showsheetbar: true, // 是否显示底部sheet按
        // loadUrl: 'http://localhost:5086/api/sheet/sheet/66'
        data: [
          {
            name: 'guistar的测试表格', // 工作表名称
            color: '#eee333', // 工作表(工作表名称底部边框线)颜色
            index: 0, // 工作表索引(新增一个工作表时该值是一个随机字符串)
            status: 1, // 激活状态
            order: 0, // 工作表的下标
            hide: 0, // 是否隐藏
            row: 30, // 行数
            column: 17, // 列数
            defaultRowHeight: 28, // 自定义行高,单位px
            defaultColWidth: 100, // 自定义列宽,单位px
            celldata: [], // 初始化使用的单元格数据,r代表行，c代表列，v代表该单元格的值，最后展示的是value1，value2
            config: {
              merge: {}, // 合并单元格
              rowlen: {}, // 表格行高
              columnlen: {}, // 表格列宽
              rowhidden: {}, // 隐藏行
              colhidden: {}, // 隐藏列
              borderInfo: {}, // 边框
              authority: {} // 工作表保护
            },
            scrollLeft: 0, // 左右滚动条位置
            scrollTop: 0, // 上下滚动条位置
            luckysheet_select_save: [], // 选中的区域
            calcChain: [], // 公式链
            isPivotTable: false, // 是否数据透视表
            pivotTable: {}, // 数据透视表设置
            filter_select: {}, // 筛选范围
            filter: null, // 筛选配置
            luckysheet_alternateformat_save: [], // 交替颜色
            luckysheet_alternateformat_save_modelCustom: [], // 自定义交替颜色
            luckysheet_conditionformat_save: {}, // 条件格式
            frozen: {}, // 冻结行列配置
            chart: [], // 图表配置
            zoomRatio: 1, // 缩放比例
            image: [], // 图片
            showGridLines: 1, // 是否显示网格线
            dataVerification: {} // 数据验证配置
          }
        ]
      })
    })
  },
  methods: {
  }
}

</script>

<style lang="scss" scoped>
</style>

运行：http://localhost:8080/

如何保存到后端，及如何从后端去拿

原理：

• 保存数据：将表格数据options.data，转化成字符串保存到服务器
• 拉取数据：将服务器的字符拿下来，导入到表格

保存到后端

• 新建一个保存按钮

<Button type="info" @click="upExcel">上传</Button>

async upExcel() {
  // eslint-disable-next-line no-undef
  var objsheet = luckysheet.getAllSheets() // 得到表的数据
  options = objsheet // 将表的数据保存本地
  this.postsheet()
}

async postsheet() {
  var strsheet = await JSON.stringify(options)// 对象转化为字符串
  // var str = escape(strsheet)// 加密字符串
  const sheetinfo = { id: 1, filename: strsheet }// 拼接成对象
  await updata(sheetinfo)// 传递对象后台
},

import { updata, getdata } from '@/api/sheet'

// http://localhost:5086/api/sheet/updata/11111111111
export function updata(sheetstr) {
  return request({
    url: '/sheet/updata',
    method: 'post',
    data: sheetstr
  })
}

// http://localhost:5086/api/sheet/sheet/1
export function getdata(sheetid) {
  return request({
    url: '/sheet/sheet/' + sheetid,
    method: 'get'
  })
}

• C#后端
  用Filename来存上传到字符串

public IActionResult info([FromBody] Sheet Sheet1)
{
    Sheet sheet = new Sheet();
    sheet.Filename = Sheet1.Filename;
    EacContext.Sheet.AddRange(sheet);
    EacContext.SaveChanges();
    return Ok(new { msg = "上传成功" });
}

public class Sheet
{
    public int Id { get; set; }

    public string Filename { get; set; } = null!;
}