MultiRowコントロールを使用して、データをExcelファイル（.xlsx）形式にエクスポートできます。MultiRowのコンテンツをExcel形式にエクスポートするには、FlexGridXlsxConverter.saveメソッドを使用する必要があります。このメソッドによってxlsxファイルコンテンツが生成され、それをファイルシステムに保存したり、サーバー上で共有することができます。
次の図は、MultiRowのコンテンツをExcel形式でエクスポートする方法を示します。
Views > Shared> _Layout.cshtml
以下のコードを実装する前に、jszip.min.js JavaScriptライブラリをアプリケーションに追加して、MultiRowのコンテンツをExcelのxlsxファイルにエクスポートできるようにする必要があります。
| HTML |
コードのコピー
|
|---|---|
<!-- SheetJS library --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js"></script> |
|
モデル - Sale.cs
ここでは、Saleクラスを使用して、データベース内の受注データを表しています。Saleオブジェクトの各インスタンスがMultiRowコントロール内の1つのレコードに対応します。
| C# |
コードのコピー
|
|---|---|
public class Sale
{
public int ID { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public string Country { get; set; }
public string Product { get; set; }
public string Color { get; set; }
public double Amount { get; set; }
public double Amount2 { get; set; }
public double Discount { get; set; }
public bool Active { get; set; }
public int Rank { get; set; }
private static List<string> COUNTRIES = new List<string>
{ "米国", "英国", "カナダ", "日本", "中国", "フランス", "ドイツ", "イタリア", "韓国", "オーストラリア" };
private static List<string> PRODUCTS = new List<string>
{ "ウィジェット", "ガジェット", "Doohickey" };
public static IEnumerable<Sale> GetData(int total)
{
var colors = new[] { "黒", "白", "赤", "緑", "青" };
var rand = new Random(0);
var dt = DateTime.Now;
var list = Enumerable.Range(0, total).Select(i =>
{
var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)];
var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)];
var color = colors[rand.Next(0, colors.Length - 1)];
var startDate = new DateTime(dt.Year, i % 12 + 1, 25);
var endDate = new DateTime(dt.Year, i % 12 + 1, 25, i % 24, i % 60, i % 60);
return new Sale
{
ID = i + 1,
Start = startDate,
End = endDate,
Country = country,
Product = product,
Color = color,
Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
Amount2 = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
Discount = Math.Round(rand.NextDouble() / 4, 2),
Active = (i % 4 == 0),
Rank = rand.Next(1, 6)
};
});
return list;
}
public static List<string> GetCountries()
{
var countries = new List<string>();
countries.AddRange(COUNTRIES);
return countries;
}
public static List<string> GetProducts()
{
List<string> products = new List<string>();
products.AddRange(PRODUCTS);
return products;
}
}
}
|
|
コントローラー - ExcelExportController.cs
| C# |
コードのコピー
|
|---|---|
public ActionResult Index() { return View(Sale.GetData(5)); } |
|
ビュー - Index.cshtml
ビューで、MultiRowコントロールのインスタンスを作成し、［Export］ボタンを追加します。レイアウト定義のプロパティを使用すると、コントロールの列および行のレイアウトを定義できます。JavaScriptにより、FlexGridXlsxConverterを使用してMultiRowコントロールをExcelファイルにエクスポートできます。
| Razor |
コードのコピー
|
|---|---|
@model IEnumerable<Sale>
@using MultiRow.Models;
@section Scripts{
<script src="http://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");
});
function exportXlsx() {
if (multiRow) {
wijmo.grid.xlsx.FlexGridXlsxConverter.save(multiRow,
{ includeCellStyles: false, includeColumnHeaders: true }, 'MultiRow.xlsx');
}
}
</script>}
<br />
@(Html.C1().MultiRow<Sale>().Id("excelExportMultiRow")
.Bind(Model)
.ShowGroups(true)
.GroupBy("Product", "Country")
.IsReadOnly(true)
.CssClass("multirow")
.LayoutDefinition(ld =>
{
ld.Add().Cells(cells =>
{
cells.Add(cell => cell.Binding("ID").Header("ID"));
cells.Add(cell => cell.Binding("Active").Header("アクティブ"));
});
ld.Add().Cells(cells =>
{
cells.Add(cell => cell.Binding("Start").Header("開始日"));
cells.Add(cell => cell.Binding("End").Header("終了日"));
});
ld.Add().Colspan(2).Cells(cells =>
{
cells.Add(cell => cell.Binding("Country").Header("国").Colspan(2));
cells.Add(cell => cell.Binding("Product").Header("製品"));
cells.Add(cell => cell.Binding("Color").Header("色"));
});
ld.Add().Colspan(2).Cells(cells =>
{
cells.Add(cell => cell.Binding("Amount").Header("金額"));
cells.Add(cell => cell.Binding("Amount2").Header("金額2"));
cells.Add(cell => cell.Binding("Discount").Header("割引").Colspan(2));
});
}))
<a download="MultiRow.xlsx" class="btn btn-default" id="exportBtn"
onclick="exportXlsx();">エクスポート</a>
|
|
関連トピック