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ファイルにエクスポートできます。
| HTML |
コードのコピー
|
|---|---|
@model IEnumerable<Sale>
@using ExcelExportCore.Models
@section Scripts{
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script>
var multiRow;
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>
}
<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"></c1-multi-row-cell>
<c1-multi-row-cell binding="End"></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>
<a download="MultiRow.xlsx" class="btn btn-default" id="exportBtn"
onclick="exportXlsx();">エクスポート</a>
|
|
関連トピック