使用luckysheet预览excel流数据，封装，附带官网地址

致我们即将拥抱的将来
已于 2023-11-14 09:34:17 修改
阅读量2.1k
点赞数 1
文章标签： vue.js
于 2023-11-13 17:44:20 首次发布
本文链接：https://blog.csdn.net/weixin_49284272/article/details/134382825
版权
建议别想太多，直接那过去用！
base64Url字段为测试的流，简单清晰。
官网地址在这里
下载安装及引用，这边不介绍了，直接上封装代码
<template>
  <div>
    <div class="isExcel" style="position: absolute; top: 0">
      <!-- <input style="font-size: 16px" type="file" @change="uploadExcel" /> -->
      <button class="save" @click="issave">保存</button>
      <button type="submit" @click="uploadExcel()">转换</button>
    </div>
    <div
      id="luckysheet"
      style="
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        left: 0px;
        top: 60px;
        bottom: 0px;
      "
    ></div>
  </div>
</template>

<script>
import LuckyExcel from "luckyexcel";

export default {
  data() {
    return {
      datalist: {},
      cellRightClickConfig: {
        copy: false, // 复制
        copyAs: false, // 复制为
        paste: false, // 粘贴
        insertRow: false, // 插入行
        insertColumn: false, // 插入列
        deleteRow: false, // 删除选中行
        deleteColumn: false, // 删除选中列
        deleteCell: false, // 删除单元格
        hideRow: false, // 隐藏选中行和显示选中行
        hideColumn: false, // 隐藏选中列和显示选中列
        rowHeight: false, // 行高
        columnWidth: false, // 列宽
        clear: false, // 清除内容
        matrix: false, // 矩阵操作选区
        sort: false, // 排序选区
        filter: false, // 筛选选区
        chart: false, // 图表生成
        image: false, // 插入图片
        link: false, // 插入链接
        data: false, // 数据验证
        cellFormat: false, // 设置单元格格式
      },
      base64Url:
        "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,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",
    };
  },
  mounted() {
    // $(function () {
    luckysheet.create({
      container: "luckysheet", // 设定DOM容器的id
      title: "Luckysheet Demo", // 设定表格名称
      lang: "zh", // 设定表格语言
      plugins: ["chart"],
      showtoolbar: false,
      cellRightClickConfig: this.cellRightClickConfig,
      data: [
        {
          name: "Cell", //工作表名称
          color: "", //工作表颜色
          index: 0, //工作表索引
          status: 1, //激活状态
          order: 0, //工作表的下标
          hide: 0, //是否隐藏
          row: 36, //行数
          column: 18, //列数
          defaultRowHeight: 19, //自定义行高
          defaultColWidth: 73, //自定义列宽
          celldata: [], //初始化使用的单元格数据
          config: {
            //   merge: {}, //合并单元格
            rowlen: {}, //表格行高
            columnlen: {}, //表格列宽
            rowhidden: {}, //隐藏行
            colhidden: {}, //隐藏列
            borderInfo: {}, //边框
            authority: {}, //工作表保护
          },
          scrollLeft: 0, //左右滚动条位置
          scrollTop: 315, //上下滚动条位置
          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: {}, //数据验证配置
        },
        {
          name: "Sheet2",
          color: "",
          index: 1,
          status: 0,
          order: 1,
          celldata: [],
          config: {},
        },
        {
          name: "Sheet3",
          color: "",
          index: 2,
          status: 0,
          order: 2,
          celldata: [],
          config: {},
        },
      ],
    });
    // });
  },
  methods: {
    uploadExcel(evt) {
      // console.log(evt.target.files, "evt======================");
      var _this = this;
      // const files = evt.target.files;
      const files = [this.base64ToFile(this.base64Url)];
      console.log(files, "files[0]======================");
      console.log(
        this.base64ToFile(this.base64Url),
        "this.base64ToFile(this.base64Url)"
      );
      if (files == null || files.length == 0) {
        alert("No files wait for import");
        return;
      }

      let name = files[0].name;
      let suffixArr = name.split("."),
        suffix = suffixArr[suffixArr.length - 1];
      if (suffix != "xlsx") {
        alert("Currently only supports the import of xlsx files");
        return;
      }
      console.log("LuckyExcel", LuckyExcel);
      LuckyExcel.transformExcelToLucky(
        files[0],
        function (exportJson, luckysheetfile) {
          console.log("exportJson", exportJson);
          _this.datalist = exportJson.sheets;
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            alert(
              "Failed to read the content of the excel file, currently does not support xls files!"
            );
            return;
          }
          window.luckysheet.destroy();

          window.luckysheet.create({
            container: "luckysheet", //luckysheet is the container id
            showinfobar: false,
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator,
            showtoolbar: false,
            cellRightClickConfig: {
              copy: false, // 复制
              copyAs: false, // 复制为
              paste: false, // 粘贴
              insertRow: false, // 插入行
              insertColumn: false, // 插入列
              deleteRow: false, // 删除选中行
              deleteColumn: false, // 删除选中列
              deleteCell: false, // 删除单元格
              hideRow: false, // 隐藏选中行和显示选中行
              hideColumn: false, // 隐藏选中列和显示选中列
              rowHeight: false, // 行高
              columnWidth: false, // 列宽
              clear: false, // 清除内容
              matrix: false, // 矩阵操作选区
              sort: false, // 排序选区
              filter: false, // 筛选选区
              chart: false, // 图表生成
              image: false, // 插入图片
              link: false, // 插入链接
              data: false, // 数据验证
              cellFormat: false, // 设置单元格格式
            },
          });
        }
      );
    },
    base64ToFile(base64) {
      let fileType = {
        "vnd.ms-excel": "xls",
        "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
        "vnd.ms-excel.sheet.macroEnabled.12": "xlsm",
        "vnd.ms-excel.sheet.binary.macroEnabled.12": "xlsb",
        "vnd.oasis.opendocument.spreadsheet": "ods",
      };
      const name = "工作表";
      if (typeof base64 != "string") {
        return;
      }
      var arr = base64.split(",");
      var type = arr[0].match(/:(.*?);/)[1];
      console.log(type.split("/")[1], 'fileType[type.split("/")[1]]');
      var fileExt = fileType[type.split("/")[1]] || "xls";
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File(
        [
          new Blob([u8arr], {
            type: type,
          }),
        ],
        `${name}.` + fileExt,
        {
          type: type,
        }
      );
    },
    issave() {
      var objsheet = window.luckysheet.getAllSheets(); // 得到表的数据
      console.log(objsheet);
      // objsheet.celldata // 将表的数据保存本地
      // objsheet.data // 将表的数据保存本地
      objsheet.forEach((element) => {
        for (const key of element.celldata) {
          console.log(key);
          console.log(element.data[key.r][key.c]);
        }
      });
    },
  },
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>