ag-grid-excel

調査用

by sarunokoshikake

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <script src="https://unpkg.com/[email protected]/dist/ag-grid-enterprise.min.js"></script></head>
<body>

<style>
    .greenBackground{
        background-color: #008000;
        color: #e0ffc1;
    }

    .blueBackground{
        background-color: #00008B;
        color: white;
    }
</style>

<div style="padding-bottom: 4px;">
    <label>
        File Name:
        <input type="text" id="fileName"/>
    </label>
    <label>
        Sheet Name:
        <input type="text" id="sheetName"/>
    </label>
    <label style="margin-left: 20px;">
        <button onclick="onBtExport()">Export to Excel</button>
    </label>
</div>
<div style="padding-bottom: 4px;">
    <span style="display: inline-block;">
        <label style="margin-right: 20px;">
            <input type="checkbox" id="skipHeader"/>
            Skip Header
        </label>
        <br/>
        <label style="margin-right: 20px;">
            <input type="checkbox" id="columnGroups"/>
            Column groups
        </label>
        <br/>
        <label style="margin-right: 20px;">
            <input type="checkbox" id="skipFooters"/>
            Skip Footers
        </label>
    </span>
    <span style="display: inline-block;">
    </span>
    <span style="display: inline-block;">
        <label style="margin-right: 20px;">
            <input type="checkbox" id="onlySelected"/>
            Only Selected
        </label>
        <br/>
        <label style="margin-right: 20px;">
            <input type="checkbox" id="useCellCallback"/>
            Use Cell Callback
        </label>
        <br/>
        <label style="margin-right: 20px;">
            <input type="checkbox" id="processHeaders"/>
            Format Headers
        </label>
        <br/>
    </span>
    <span style="display: inline-block;">
        <label style="margin-right:...

JavaScript

var columnDefs = [{
    headerName: 'Group1',
    children: [
        {headerName: "Athlete", field: "athlete", width: 150},
        {headerName: "Age", field: "age", width: 90, cellClassRules:{
            greenBackground: function(params) { return params.value < 23},
            blueBackground: function(params) { return params.value < 20}
        }},
        {headerName: "Country", field: "country", width: 120},
        {headerName: "Group", valueGetter: "data.country.charAt(0)", width: 75},
        {headerName: "Year", field: "year", width: 75}
    ]
}, {
    headerName: 'Group2',
    children: [
        {headerName: "Date", field: "date", width: 110},
        {headerName: "Sport", field: "sport", width: 110},
        {headerName: "Gold", field: "gold", width: 100},
        {headerName: "Silver", field: "silver", width: 100},
        {headerName: "Bronze", field: "bronze", width: 100},
        {headerName: "Total", field: "total", width: 100}
    ]
}];

var pinnedTopRow = { athlete: 'Floating Top Athlete', age: 999, country: 'Floating Top Country', year: 2020,
    date: '01-08-2020', sport: 'Floating Top Sport', gold: 22, silver: '003', bronze: 44, total: 55};

var pinnedBottomRow = { athlete: 'Floating Bottom Athlete', age: 888, country: 'Floating Bottom Country', year: 2030,
    date: '01-08-2030', sport: 'Floating Bottom Sport', gold: 222, silver: '005', bronze: 244, total: 255};

var gridOptions = {
    columnDefs: columnDefs,
    groupHeaders: true,
    enableFilter: true,
    enableSorting: true,
    rowSelection: 'multiple',
    pinnedTopRowData: [pinnedTopRow],
    pinnedBottomRowData: [pinnedBottomRow],
    defaultColDef: {

    }
};

function getBooleanValue(cssSelector) {
    return document.querySelector(cssSelector).checked === true;
}

function onBtExport() {
    var params = {
        skipHeader: getBooleanValue('#skipHeader'),
        columnGroups: getBooleanValue('#columnGroups'),
        skipFooters: getBooleanValue('#skipFooters'),
       ...