Features

Excelエクスポート

Excelエクスポート

機能

説明

このサンプルは、MultiRowのコンテンツをExcelのxlsxファイルにエクスポートする方法を示します。

MultiRowのコンテンツをエクスポートするには、MultiRowインスタンスをFlexGridXlsxConverter.saveメソッドに渡します。
これにより、xlsxファイルのコンテンツが生成され、このコンテンツをローカルファイルに保存したり、サーバーに送ることができます。

メモ: CDNのリンクhttp://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.jsから、jszip.jsライブラリを追加する必要があります。

using MultiRowExplorer.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public ActionResult ExcelExport()
        {
            return View(Sale.GetData(100));
        }
    }
}
@model IEnumerable<Sale>
@{
    ViewBag.DemoSettings = true;
}

@section Styles{
    <style>
        .checkbox-div {
            padding-left: 15px;
            display: inline-block;
            vertical-align: middle;
        }

            .checkbox-div .checkbox {
                display: inline-block;
                vertical-align: middle;
            }
    </style>
}

@section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script>
        var multiRow, colHeaderCheckBox;
        c1.documentReady(function () {
            multiRow = wijmo.Control.getControl("#excelExportMultiRow");
            colHeaderCheckBox = document.getElementById("colHeaderCheckBox");
        });

        function exportXlsx() {
            if (multiRow) {
                wijmo.grid.xlsx.FlexGridXlsxConverter.save(multiRow, { includeStyles: false, includeColumnHeaders: true }, 'MultiRow.xlsx');
            }
        }

    </script>
}

<c1-multi-row id="excelExportMultiRow" class="multirow" is-read-only="true" 
              show-groups="true" group-by="Product,Country">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="ID"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Active"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="Start" format="MM/dd/yyyy"></c1-multi-row-cell>
        <c1-multi-row-cell binding="End" format="MM/dd/yyyy HH:mm:ss" width="150"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Country" colspan="2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Product"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Color"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Amount"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Amount2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Discount" colspan="2"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
</c1-multi-row>

@section Settings{
    <div class="col-md-12 col-xs-12">
        <div class="form-inline well well-lg">
            <a download="MultiRow.xlsx" class="btn btn-default" id="exportBtn" onclick="exportXlsx();">@Html.Raw(MultiRowRes.ExcelExport_Text3)</a>
        </div>
    </div>
}
@section Description{
<p>@Html.Raw(MultiRowRes.ExcelExport_Text0)</p>

<p>@Html.Raw(MultiRowRes.ExcelExport_Text1)</p>

<p>@Html.Raw(MultiRowRes.ExcelExport_Text2)</p>

}