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ファイルにエクスポートできます。
| HTML |
コードのコピー
|
|---|---|
@model IEnumerable<Sale>
@using C1.Web.Mvc
@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 />
<c1-multi-row id="exportPdfMultiRow" class="multirow custom-multi-row" is-read-only="true"
show-groups="true" group-by="Product,Country" selection-mode="ListBox">
<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>
<button class="btn btn-default" onclick="exportPdf()">エクスポート</button>
|
|
関連トピック