luckysheet部署在laravel上

先上demo图

图片: 登录界面.。 文档管理界面
表格页面 使用的就是 luckysheet 基本不用介绍

填写数据正常 保存

数据保存在数据库 ，数据以JSON 形式储存。

中间测试 可以推送邮箱提示用户信息更新。

测试数据 保存成功 另一个浏览器打开正常显示。

新增文档数据。



右下角提示框

删除文档。

用户注册登录。

下面介绍下代码的相关问题

应用luckysheet JS CSS 文件到本地 内联代码片

// An highlighted block
<link rel='stylesheet' href="../../resources/plugins/css/pluginsCss.css"/>
<link rel='stylesheet' href="../../resources/plugins/plugins.css"/>
<link rel='stylesheet' href="../css/luckysheet.css"/>
<link rel='stylesheet' href="../../resources/assets/iconfont/iconfont.css"/>

<link rel='stylesheet' href="../../resources/expendPlugins/chart/chartmix.css"/>

上述可以换成自己的本地下载。

下面是提示框样式的引用 ，我也下载到本地了。 内联代码片

<!-- 提示弹框换成本地数据源 -->
<link rel="stylesheet" type="text/css" href="../css/toastify.css">
<script type="text/javascript" src="../js/toastify.js"></script>

实例化图表的语句。 内联代码片

<!-- 提示弹框换成本地数据源 -->
 <div>
     <div  id="luckysheet"  style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">
        <!--  <img onclick="window.open('./index','_self');" src="../css/waffle_sprite.png" width="150px" height="50px"> -->
    </div>
  </div>

  <script>
    // 将Laravel的CSRF令牌添加到所有的AJAX请求中
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var titleValue ="";
     $(function () {
    // 配置项
        var options = {
            container: 'luckysheet', // luckysheet为容器id
            plugins: ['chart'],
            title: "{{$title}}", // 设定表格名称
            lang: 'zh', // 设定表格语言
            myFolderUrl: "../sheetIndex", // 作用：左上角<返回按钮的链接
            functionButton: '<button id="" class="btn btn-primary" οnclick="save()" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">保存</button> <button id="" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 85px;" οnclick="downExcelData()">下载</button>'
        };
        
        //把title 值取出来
        titleValue = options.title;

        // 使用Ajax从后台获取数据
        $.ajax({
            url: "././excel/getWorkBook?id={{$id}}", // 后台post地址
            type: "POST",
            dataType: "json",
            success: function(response) {
                options.data = JSON.parse(response); // 将获取到的数据赋值给options.data
                luckysheet.create(options);
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });
    });
 //这段代码用于解决图表的数据处理
    function getLuckysheetConfig() {
        let ls = luckysheet.getLuckysheetfile()
        ls.forEach((item, index) => {
            if(item.chart) {
                item.chart.forEach((chart, i) => {
                    ls[index].chart[i] = {
                        ...ls[index].chart[i],
                        chartOptions: {...chartmix.default.getChartJson(chart.chart_id)}
                    }
                    let div = document.getElementById(chart.chart_id + '_c');
                    if(div.style) {
                        ls[index].chart[i].left = parseInt(div.style.left)
                        ls[index].chart[i].top = parseInt(div.style.top)
                        ls[index].chart[i].width = parseInt(div.style.width)
                        ls[index].chart[i].height = parseInt(div.style.height)
                    }
                })
            }
        })
        return JSON.stringify(ls)
    }

  function save() {
       
        try {
                localStorage.setItem('luckysheet', getLuckysheetConfig());
                //console.log(getLuckysheetConfig());
                var jsonData=getLuckysheetConfig();

                $.ajax({
                    type : 'post',
                    url  : '././excel/uploadData?id={{$id}}',
                    data : {
                                data: jsonData,
                                title: titleValue,
                            },
                    
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
                    },
                    dataType : "json",
                    //在请求之前调用的函数
                    beforeSend: function () {
                        Toastify({
                            text: '保存中请耐心等待！',
                            duration: 3000,
                            close: true,
                            gravity: 'top', // 指定位置在顶部
                            positionLeft: false, // 关闭水平位置
                            position: 'center' // 指定位置在右侧
                        }).showToast();
                    },

                    //成功返回之后调用的函数
                    success: function(e){
                        Toastify({
                            text: '保存成功！',
                            duration: 3000,
                            close: true,
                            gravity: 'top', // 指定位置在顶部
                            positionLeft: false, // 关闭水平位置
                            position: 'center' // 指定位置在右侧
                        }).showToast();
                    },
                    // //调用执行后调用的函数
                    // complete: function(XMLHttpRequest, textStatus){
                    //     alert(XMLHttpRequest.responseText);
                    //     alert(textStatus);
                    //     //HideLoading();
                    // },
                    //调用出错执行的函数
                    error: function(){
                        //请求出错处理
                       Toastify({
                            text: '保存失败，请联系IT',
                            duration: 3000,
                            close: true,
                            gravity: 'top', // 指定位置在顶部
                            positionLeft: false, // 关闭水平位置
                            position: 'center' // 指定位置在右侧
                        }).showToast();
                    }
                });
           
            } catch (err) {
                Toastify({
                text: '保存失败！',
                duration: 3000,
                close: true,
                gravity: 'top',
                positionLeft: false,
                position: 'center'
                }).showToast();
            }
    }
 //下载excel
    function downExcelData() {

        var jsonData=luckysheet.getluckysheetfile();
        //console.log(jsonData);
        //console.log(1);
        // console.log(JSON.parse(jsonData));
       
         $.ajax({
            type : 'post',
            url  : '././excel/downfile',
            data : {
                    data: jsonData,
                    title:titleValue
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
            },
            dataType : "json",
            //在请求之前调用的函数
            beforeSend:function(){
               Toastify({
                            text: '下载中请等待！',
                            duration: 3000,
                            close: true,
                            gravity: 'top', // 指定位置在顶部
                            positionLeft: false, // 关闭水平位置
                            position: 'center' // 指定位置在右侧
                        }).showToast();
            },
            //成功返回之后调用的函数
            success: function(e){
               Toastify({
                            text: '下载完成！',
                            duration: 3000,
                            close: true,
                            gravity: 'top', // 指定位置在顶部
                            positionLeft: false, // 关闭水平位置
                            position: 'center' // 指定位置在右侧
                        }).showToast();

            var workbook = XLSX.utils.book_new();

            // 遍历jsonData中的工作表数据
            jsonData.forEach(function(table) {
            // 创建一个新的工作表，并指定工作表名称
            var worksheet = XLSX.utils.aoa_to_sheet([Object.keys(table.data[0]), ...table.data.map(row => Object.values(row))]);
            XLSX.utils.book_append_sheet(workbook, worksheet, table.name);
            // 将第一行设置为隐藏
            //worksheet['!rows'] = [{ hidden: true }];
            });
            var excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

            // 生成Excel文件数据
            var fileName = titleValue+'.xlsx';
            var blob = new Blob([excelData], { type: 'application/octet-stream' });
            saveAs(blob, fileName);
            // //调用执行后调用的函数
            // complete: function(XMLHttpRequest, textStatus){
            //     alert(XMLHttpRequest.responseText);
            //     alert(textStatus);
            //     //HideLoading();
             },
            //调用出错执行的函数
            error: function(){
                //请求出错处理
               Toastify({
                            text: '下载失败！',
                            duration: 3000,
                            close: true,
                            gravity: 'top', // 指定位置在顶部
                            positionLeft: false, // 关闭水平位置
                            position: 'center' // 指定位置在右侧
                        }).showToast();
            }
        });
    }
    </script>

上述代码是整个sheet 实现的一个过程 ，luckysheet 的loadUrl 原始开发API 我没有参照 ，因为有原本的loadUrl 引用是可以实现，但是 表格的图表保存会出现显示不出来的问题，这里我换成localStorage.setItem(‘luckysheet’, getLuckysheetConfig()); 存起来后我会写到数据库或本地文件夹，然后通过Ajax 从后台取出来 使用，这样就解决了图表保存后不能正常显示，可能有其他方案，在这里我也想了很久找到这个方法解决。

//换成本地储存吧 我也不知道叫什么都是网上大神写过的东西，
localStorage.setItem('luckysheet', getLuckysheetConfig());

下面介绍下后台请求的地址写法

这个是保存数据的 内联代码片

// An highlighted block
public function uploadData(Request $request)
    {
        // dd(session('LuckyUserInfo'));
        //增加用户信息保护，先判断session 信息是否满足登录
        if(!empty(session('LuckyUserInfo'))){
            $exceldatas = $request->input('data');
            $title = $request->input('title');
            $id= $request->input('id');

            $filePath = 'D:\phpstudy_pro\WWW\laravel\storage\app\uploads\example.json';

            if (file_exists($filePath)) {
                unlink($filePath);
            }

          
            // Create new file
            file_put_contents($filePath, $exceldatas, LOCK_EX);


            //写入数据库
           
            //推送邮箱 信息 
            // $useremail =array('11111@qq.com','111111@qq.com');
            // $sendEmailController = new SendEmailController();
            // $sendEmailController->sendMailtext($useremail,'表格更新通知！','新增成功！');
            

            //写入数据库 mysql 
            // $luckysheet = new LuckysheetModel;
            // $luckysheet->inforsheet = $exceldatas;
            // $luckysheet->title = $title;
            // $luckysheet->save();
            //dd($request->input('id'));
            $luckysheet = LuckysheetModel::where('id', $id)->first();
            $luckysheet->inforsheet = $exceldatas;
            $luckysheet->title = $title;
            $luckysheet->update();


            //dispatch(new SendEmailJob($useremail, '新增成功！'))->onQueue('emails');

            return response()->json(['success' => true]);
        }else{
            return response()->json(['error' => true]);
        }
        
    }

这个是获取数据的 内联代码片

  public function getWorkBook(Request $request)
    {
        // $exceldatas = $request->input('exceldatas');
        // $title = $request->input('title');
        // //dd(json_encode($exceldatas));
        // $jsonData = json_encode($exceldatas);
        // $filePath = 'D:\phpstudy_pro\WWW\laravel\storage\app\uploads\example.json';
        // file_put_contents($filePath, $jsonData, FILE_APPEND | LOCK_EX);
        // //file_put_contents($filePath, $jsonData);
        //return response()->json(['success' => true]);

        //dd($request->input());
        $id=$request->input('id');
        //原本用sheet_old 但是图表保存数据中缺失了chartOptions,保存后的数据重新加载的时候，图表不会被绘制出来。
        //换成保存本地 localStorage.setItem('luckysheet', getLuckysheetConfig()); 用来存储数据，之前是从 example.json' 调用数据，现在还是会把数据写进example.json，同时 写入数据库 ，后续继续完善

        //从文件JSON 取出原始数据 
        //$filePath = 'D:\phpstudy_pro\WWW\laravel\storage\app\uploads\example.json';
        //$jsonData = file_get_contents($filePath);


        //从数据库取出data 数据 
        $luckysheet = LuckysheetModel::findOrFail($id); 
        $jsonData = $luckysheet->inforsheet; 
        //dd($jsonData);
        return response()->json($jsonData);
    }

路由都是采用的POST 写法 内联代码片

//luckysheet 数据处理
Route::post('SheetManagement/excel/uploadData', 'SpreadsheetController@uploadData');
Route::post('SheetManagement/excel/downfile', 'SpreadsheetController@downfile');
Route::post('SheetManagement/excel/getWorkBook', 'SpreadsheetController@getWorkBook');

有兴趣的伙伴可以联系一起探讨