koperasi/views/exceljs.blade.php

@extends('temp.admin')
@php
use NN\Module\DB;
use NN\Module\View;
@endphp
@section("content")

<div class="content-header row">
    <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">Laporan</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper col-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active" id="sublap">Testing Library Laporan</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="content-header-right col-md-6 col-12">
        <div class="btn-group float-md-right">
            
        </div>
    </div>
</div>
<div class="content-body">
    <section class="mb-3" id="dasbor">
        <div class="row">
            <div class="col-sm-12">
            <div class="card" id="cardMenuArea" style="display:none;">
                <div class="card-header" style='border-bottom: 1px solid #dddddd;'>
                    <button class="btn btn-success print-data"><i class="icon-printer"></i></button>
                    <input id="searchInput" type="search" style="max-width:200px; float: right;" class="form-control" placeholder="search...">
                    <div id="loaderSearch" class="spinner-border spinner-border-sm mt-1 mr-1" role="status" style="float:right;display:none;">
                        <span class="visually-hidden"></span>
                    </div>
                </div>
            </div>
            <div id="cardMenuReport">
                <div class="card">
                    <div class="card-body">    
                        <button onclick="window.OpenExcel();" class="btn btn-primary" id="cetak-button">Test Excel Library</button>
                    </div>
                </div>
            </div>
           
        </div>
    </section>
</div>
@endsection
@section('css')
<style>
    table td{
        border : none;
    }
</style>
@endsection
@section('script')
<script>
    window.exportExcel = function(data) {
        // Create a new workbook and add a worksheet
        const workbook = XLSX.utils.book_new();
        const worksheetData = [];


        for(let cData of data.data){
            let arr = [];
            for(let p of cData){
                arr.push(p.name);
            }
            worksheetData.push(arr);
        }

        // Add worksheet with data
        const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

        // Set column widths
        worksheet['!cols'] = [];

        for(let y in data.style){
            let yy = data.style[y];
            worksheet['!cols'].push({
                wch: yy.width
            });
        }

        let metaData = {}


        // Define a border style
        const borderStyle = {
            top: { style: "thin" },
            bottom: { style: "thin" },
            left: { style: "thin" },
            right: { style: "thin" }
        };

        // Function to apply styles to a range of cells
        function applyStyle(range) {
            for (let R = range.s.r; R <= range.e.r; ++R) {
                for (let C = range.s.c; C <= range.e.c; ++C) {
                    const cellAddress = XLSX.utils.encode_cell({ r: R, c: C });
                    if (!worksheet[cellAddress]) continue;
                    worksheet[cellAddress].s = {
                        border: borderStyle,
                        font: R === 0 ? { bold: true } : {}, // Bold for header
                    };
                }
            }
        }

        // Apply styles for the entire range
        applyStyle({ s: { r: (data && data.border && data.border.start ? data.border.start : 0), c: 0 }, e: { r: (data && data.border && data.border.start ? data.border.start : 0) + data.data.length, c: (data && data.border && data.border.end ? data.border.end : 3) } });

        // Add the worksheet to the workbook
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Daftar Absensi');

        // Export the file
        XLSX.writeFile(workbook, 'Absensi_with_Borders.xlsx');
    }

    window.OpenExcel = function(){
        window.exportExcel({
            border: {
                start: 1,
                end: 3
            },
            style:{
                no : {
                    width: 10
                },
                c1 :{
                    width: 20
                },
                c2 : {
                    width: 20
                },
                c3 : {
                    width: 20
                }
            },
            data : [
                [
                    {
                        name: ""
                    }
                    , {
                        name: ""
                    }
                    , {
                        name: ""
                    }
                    , {
                        name: ""
                    }
                ]
                ,[
                    {
                        name: "NO"
                    }
                    , {
                        name: "C1"
                    }
                    , {
                        name: "C2"
                    }
                    , {
                        name: "C3"
                    }
                ]
                ,[
                    {
                        name: "1"
                    }
                    , {
                        name: "data1"
                    }
                    , {
                        name: "data2"
                    }
                    , {
                        name: "data3"
                    }
                ]
            ]
        })
    }
</script>
@endsection