CocosCreator 拖动excel到网页直接读取解析

参考：

CSDN 前端实现解析Excel

CSDN 隐藏input file标签并触发点击上传文件事件

sheetjs官方文档

一般情况下，策划修改了配置中游戏数值，用工具将excel导出成json给程序上传，更新后才能测试新的数值。

这样当频繁修改测试时十分不便，拖动excel到网页直接解析到游戏中保存，可以让策划自行快速进行修改测试，不用再导出json给程序上传。

当策划测试完毕后，再将excel导出正式json给程序上传即可。

目录：

一 下载xlsx

二 将xlsx放入cocos中使用

三 拖拽一个excel到浏览器并读取表格数据

一 下载xlsx

新建任一文件夹，shift右键打开命令窗口

输入如下，下载xlsx

npm install xlsx

等待下载完成，在下载的文件路径npm\node_modules\xlsx里可以找到xlsx文件

二 将xlsx放入Cocos中使用

复制文件npm\node_modules\xlsx\dist\xlsx.mini.min.js  (这是xlsx压缩后代码，还有core、full两种，应该是最小、核心、完整3种意思，具体每种包含哪些功能未知)

复制文件npm\node_modules\xlsx\types\index.d.ts        (这是xlsx代码的声明文件)

将两个文件放入cocos项目assets\libs下，并改名为xlsx.js和xlsx.d.ts

在cocoscreator中，选择xlsx.js导入为插件

打开xlsx.d.ts，增加命名空间declare namespace XLSX，方便在代码中使用。

修改完成后，可以在cocoscreator中使用xlsx并且有提示了。

3 拖拽一个excel到浏览器并读取表格数据

首先定义一个excel，例如物品表格。

在cocos的html页面中添加拖拽上传文件代码，直接在ts里就可以操作html。

cocos发布的html中canvas的id是'GameCanvas'。

我们根据id获取canvas

let canvas = document.getElementById("GameCanvas");

为canvas添加拖拽上传文件代码，这里必须使用preventDefault来取消事件，dragover事件虽然没用到也必须调用preventDefault，否则浏览器会用新标签打开excel文件。

        canvas.addEventListener("dragover", event => {
            event.preventDefault();
            console.log("dragover");
        });

        canvas.addEventListener("drop", event => {
            event.preventDefault();
            let file = event.dataTransfer.files[0];
            this.handleFile(file);
        });

处理excel文件，将excel数据转成json格式。

    private handleFile(file) {
        if (!file) {
            return;
        }

        //文件后缀不是.xls或.xlsx则返回
        if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
            console.log("只允许上传xls、xlsx格式文件");
            return;
        }

        //将excel中的数据读出
        if (file) {
            let reader = new FileReader();
            reader.onload = function (event) {
                let data = (event.target as any).result;
                let workbook = XLSX.read(data, { type: "binary" });
                let sheetName = workbook.SheetNames[0];
                let json = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
            };
            reader.readAsArrayBuffer(file);
        }
    }

读出的json是个数组，并且第0个元素是表格中的描述，可自行处理数据。

完整代码：

const { ccclass, property } = cc._decorator;

@ccclass
export default class Helloworld extends cc.Component {

    start() {
        //获取cocoscreator的游戏canvas
        let canvas = document.getElementById("GameCanvas");

        //拖拽经过canvas，必须这里调用dragover并且设置event.preventDefault取消该事件，否则浏览器会新标签打开文件
        canvas.addEventListener("dragover", event => {
            event.preventDefault();
        });

        //拖拽结束，处理文件
        canvas.addEventListener("drop", event => {
            event.preventDefault();
            let file = event.dataTransfer.files[0];
            this.handleFile(file);
        });
    }

    private handleFile(file) {
        if (!file) {
            return;
        }

        //文件后缀不是.xls或.xlsx则返回
        if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
            console.log("只允许上传xls、xlsx格式文件");
            return;
        }

        //将excel中的数据读出
        if (file) {
            let reader = new FileReader();
            reader.onload = function (event) {
                let data = (event.target as any).result;
                let workbook = XLSX.read(data, { type: "binary" });
                let sheetName = workbook.SheetNames[0];
                let json = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
                console.log("excel数据:", json);
            };
            reader.readAsArrayBuffer(file);
        }
    }
}