Features
PDFエクスポート
PDFエクスポート
PDFKitベースのJavaScriptライブラリであるFlexGridPdfConverterを使用して、サーバー側のコードを使用することなく、MultiRowをPDF（Portable Document Format）にエクスポートできます。
機能
You can use the FlexGridPdfConverter, a PDFKit-based JavaScript library,to export MultiRow to PDF (Portable Document Format) without using any server-side code.
MultiRowをエクスポートするには、以下の引数を受け取るFlexGridPdfConverter.export関数を使用する必要があります。
- MultiRowインスタンス。
- エクスポートするファイルの名前。
- エクスポートの設定。
このサンプルでは、以下のメニューを使用して、以下のエクスポート設定を変更できます。
- scaleMode：ページに合わせてMultiRowコンテンツを拡大縮小する方法を決定します。
- orientation：ページの方向を決定します。
- exportMode：MultiRowのどの部分（すべてのデータまたは現在の選択だけ）をエクスポートするかを決定します。
このサンプルでは、MultiRowは、Firaフォント、および2つの書体FiraSans-Regular.ttfとFiraSans-Bold.ttfを使用します。ヘッダーセルの表示にはFiraSans-Bold.ttf（太字）書体が使用され、それ以外のコンテンツにはFiraSans-Regular.ttf書体が使用されます。
PDFにフォントを埋め込むには、次のエクスポート設定を使用します。
- embeddedFonts：URL、名前、スタイル、ウェイト（太さ）など、さまざまな独自フォントに関する情報をエクスポートライブラリに提供します。
- styles：グリッド要素のスタイルを設定して、埋め込みフォントにリンクするために使用します。
エクスポートの設定：
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 PdfExport()
{
return View(Sale.GetData(25));
}
}
}
@model IEnumerable<Sale>
@{
ViewBag.DemoDescription = false;
}
@section Styles{
<link rel="stylesheet" href="~/Content/css/CustomMultiRow.css" />
<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>
var multiRow, exportSettings, settingsDiv, settingsDivDfScroll;
c1.documentReady(function () {
multiRow = wijmo.Control.getControl("#exportPdfMultiRow");
settingsDiv = document.getElementById("exportSettingsDiv");
exportSettings = {
exportMode: wijmo.grid.pdf.ExportMode.All,
orientation: wijmo.pdf.PdfPageOrientation.Portrait,
scaleMode: wijmo.grid.pdf.ScaleMode.ActualSize
};
});
function exportPdf() {
var fontFile = { source: 'https://demo.mescius.jp/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' },
font = new wijmo.pdf.PdfFont('ipaexg');
var needEmbedFonts = embedFontsCheckBox.checked;
wijmo.grid.pdf.FlexGridPdfConverter.export(multiRow, 'MultiRow.pdf', {
maxPages: 10,
exportMode: exportSettings.exportMode,
scaleMode: exportSettings.scaleMode,
embeddedFonts: needEmbedFonts
? [{
source: '@(Url.Content("~/Content/fonts/fira/FiraSans-Regular.ttf"))',
name: 'fira',
style: 'normal',
weight: 'normal',
sansSerif: true
}, {
source: '@(Url.Content("~/Content/fonts/fira/FiraSans-Bold.ttf"))',
name: 'fira',
style: 'normal',
weight: 'bold',
sansSerif: true
}, fontFile]
: [fontFile],
documentOptions: {
pageSettings: {
layout: exportSettings.orientation
},
header: {
declarative: {
text: '&[Page]\\&[Pages]\theader\t&[Page]\\&[Pages]'
}
},
footer: {
declarative: {
text: '&[Page]\\&[Pages]\tfooter\t&[Page]\\&[Pages]'
}
},
info: {
author: 'C1',
title: 'PdfDocument sample',
keywords: 'PDF, C1, sample',
subject: 'PdfDocument'
}
},
styles: {
cellStyle: {
backgroundColor: '#ffffff',
borderColor: '#c6c6c6',
font: {
family: 'fira'
}
},
altCellStyle: {
backgroundColor: '#f9f9f9'
},
groupCellStyle: {
backgroundColor: '#dddddd',
font: font
},
headerCellStyle: {
backgroundColor: '#eaeaea'
}
}
});
}
function setScaleMode(menu) {
menu.header = "Scale Mode: <b>" + menu.selectedItem.Header + "</b>";
exportSettings.scaleMode = wijmo.grid.pdf.ScaleMode[menu.selectedItem.Header];
}
function setOrientation(menu) {
menu.header = "Orientation: <b>" + menu.selectedItem.Header + "</b>";
exportSettings.orientation = wijmo.pdf.PdfPageOrientation[menu.selectedItem.Header];
}
function setExportMode(menu) {
menu.header = "Export Mode: <b>" + menu.selectedItem.Header + "</b>";
exportSettings.exportMode = wijmo.grid.pdf.ExportMode[menu.selectedItem.Header];
}
function setEmbedFonts(menu) {
menu.header = "Embed Fonts: <b>" + menu.selectedItem.Header + "</b>";
exportSettings.embedFonts = Boolean.valueOf(menu.selectedItem.Header);
}
</script>
}
<div class="copy well">
<p>@Html.Raw(MultiRowRes.PdfExport_Text0)</p>
<p>@Html.Raw(MultiRowRes.PdfExport_Text1)</p>
<ul>
<li>@Html.Raw(MultiRowRes.PdfExport_Text5)</li>
<li>@Html.Raw(MultiRowRes.PdfExport_Text6)</li>
<li>@Html.Raw(MultiRowRes.PdfExport_Text7)</li>
</ul>
<p>@Html.Raw(MultiRowRes.PdfExport_Text2)</p>
<ul>
<li>@Html.Raw(MultiRowRes.PdfExport_Text8)</li>
<li>@Html.Raw(MultiRowRes.PdfExport_Text9)</li>
<li>@Html.Raw(MultiRowRes.PdfExport_Text10)</li>
</ul>
<p>@Html.Raw(MultiRowRes.PdfExport_Text3)</p>
<p>@Html.Raw(MultiRowRes.PdfExport_Text4)</p>
<ul>
<li>
<b>@Html.Raw(MultiRowRes.PdfExport_Text11)</b>
</li>
<li>@Html.Raw(MultiRowRes.PdfExport_Text12)</li>
</ul>
</div>
<div class="copy well" id="exportSettingsDiv">
<b>@Html.Raw(MultiRowRes.PdfExport_Text13)</b>
<br />
<br />
<div class="col-md-12 col-xs-12">
<c1-menu header="Scale Mode: <b>ActualSize</b>" item-clicked="setScaleMode">
<c1-menu-item header="ActualSize"></c1-menu-item>
<c1-menu-item header="PageWidth"></c1-menu-item>
<c1-menu-item header="SinglePage"></c1-menu-item>
</c1-menu>
<c1-menu header="Orientation: <b>Portrait</b>" item-clicked="setOrientation">
<c1-menu-item header="Portrait"></c1-menu-item>
<c1-menu-item header="Landscape"></c1-menu-item>
</c1-menu>
<c1-menu header="Export Mode: <b>All</b>" item-clicked="setExportMode">
<c1-menu-item header="All"></c1-menu-item>
<c1-menu-item header="Selection"></c1-menu-item>
</c1-menu>
</div>
<div class="checkbox-div">
<label>
<input type="checkbox" id="embedFontsCheckBox" class="checkbox" /> @Html.Raw(MultiRowRes.PdfExport_Text15)
</label>
</div>
</div>
<button class="btn btn-default" onclick="exportPdf()">@Html.Raw(MultiRowRes.PdfExport_Text16)</button>
<br />
<c1-multi-row id="exportPdfMultiRow" class="multirow custom-multi-row" selection-mode="ListBox"
show-groups="true" group-by="Product,Country" headers-visibility="All">
<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 Summary{
@Html.Raw(MultiRowRes.PdfExport_Text14)
}