MultiRowコントロールを使用しているときに、同僚がデータにアクセスできるようにしたり、ファイルをサーバー上で共有するために、データをPDF形式にエクスポートする必要があることがあります。MultiRowコントロールは、クライアント側のPDFエクスポート機能を提供しています。PDFKitベースのJavaScriptライブラリであるFlexGridPdfConverterを使用して、サーバー側のコードを使用することなく、MultiRowをPDF（Portable Document Format）にエクスポートできます。MultiRowコントロールは、現在の列順、表示/非表示、サイズを使用してPDFファイルの出力を生成します。
次の図は、MultiRowのコンテンツをPDFファイル形式でエクスポートする方法を示します。
モデル - 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;
}
}
}
|
|
コントローラー - PDFExportController.cs
| C# |
コードのコピー
|
|---|---|
public ActionResult Index() { return View(Sale.GetData(5)); } |
|
ビュー - Index.cshtml
ビューで、MultiRowコントロールのインスタンスを作成し、［Export］ボタンを追加します。レイアウト定義のプロパティを使用すると、コントロールの列および行のレイアウトを定義できます。JavaScriptにより、FlexGridPdfConverterを使用してMultiRowコントロールをPDFファイルにエクスポートできます。
| C# |
コードのコピー
|
|---|---|
@model IEnumerable<Sale>
@using C1.Web.Mvc
@using MultiRowPdfExport.Models
@section Scripts{
<script>
var multiRow;
c1.documentReady(function () {
multiRow = wijmo.Control.getControl("#exportPdfMultiRow");
});
function exportPdf() {
wijmo.grid.pdf.FlexGridPdfConverter.export(multiRow, 'MultiRow.pdf', {maxPages: 10});
}
</script>
}
<br />
@(Html.C1().MultiRow<Sale>().Id("exportPdfMultiRow")
.Bind(Model)
.SelectionMode(C1.Web.Mvc.Grid.SelectionMode.ListBox)
.HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.All)
.ShowGroups(true)
.GroupBy("Product", "Country")
.CssClass("multirow custom-multi-row")
.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));
});
}))
<button class="btn btn-default" onclick="exportPdf()">エクスポート</button>
|
|
関連トピック