FlexGrid

FlexGrid

グループ

このサンプルでは、FlexGridをPDFにエクスポートする方法を紹介します。グループ化のサポート.

機能

サンプル

エクスポートの設定：

セキュリティ設定：

文書の制限 (所有者パスワードが必要)

注釈

アクセシビリティを有効にする

内容のコピー

文書アセンブリ

フォームフィールドの入力と署名

文書の変更

説明

このサンプルでは、FlexGridPdfConverter で FlexGrid の行のグループ化機能をサポートする方法を示します。

PDFKit ベースの JavaScript ライブラリである FlexGridPdfConverter を使用して、サーバー側のコードを使用することなく、 FlexGrid を PDF（Portable Document Format）にエクスポートできます。

FlexGrid をエクスポートするには、以下の引数を受け取る FlexGridPdfConverter.export 関数を使用する必要があります。

FlexGrid インスタンス。
エクスポートするファイルの名前。
エクスポートの設定。

このサンプルでは、上記のメニューを使用して、以下のエクスポート設定を変更できます。

scaleMode：ページに合わせて FlexGrid コンテンツを拡大縮小する方法を決定します。
orientation：ページの向きを決定します。
exportMode：FlexGrid のどの部分（すべてのデータまたは現在の選択だけ）をエクスポートするかを決定します。

エクスポートされたPDF 文書を保存するには、ユーザーパスワード、所有者パスワード、アクセス許可などのセキュリティ設定を指定することができます。

ソース

PDFExportGroupController.cs

using MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using System.Linq;

namespace MvcExplorer.Controllers
{
    public partial class FlexGridController : Controller
    {
        private static IEnumerable<Sale> pdfExportGroupData = Sale.GetData(500);
        public ActionResult PDFExportGroup()
        {
            ViewBag.GroupedFlexGridData = pdfExportGroupData;
            return View();
        }
    }
}

PDFExportGroup.cshtml

@using C1.Web.Mvc.Grid
@{
    IEnumerable<Sale> groupedFlexGridData = ViewBag.GroupedFlexGridData;
}

@section Styles{
    <style>
        .fixed-top {
            z-index: 999;
            position: fixed;
            top: 0px;
        }

        .reduce {
            padding-bottom: 0px;
        }
    </style>
}

@section Scripts{
    <script>
        var groupedGrid, exportSettings, settingsDiv, securitySettingsDiv;

        c1.documentReady(function () {
            groupedGrid = wijmo.Control.getControl("#groupingFlexGrid");
            settingsDiv = document.getElementById("exportSettingsDiv");
            securitySettingsDiv = document.getElementById("securitySettingsDiv");
            exportSettings = {
                exportMode: wijmo.grid.pdf.ExportMode.All,
                orientation: wijmo.pdf.PdfPageOrientation.Portrait,
                scaleMode: wijmo.grid.pdf.ScaleMode.ActualSize,
                version: "v1_4",
            };

        });

        function setScaleMode(menu) {
            menu.header = "@(FlexGridRes.PDFExport_ScaleMode): <b>" + menu.selectedItem.Header + "</b>";
            exportSettings.scaleMode = wijmo.grid.pdf.ScaleMode[menu.selectedItem.Header];
        }

        function setOrientation(menu) {
            menu.header = "@(FlexGridRes.PDFExport_Orientation): <b>" + menu.selectedItem.Header + "</b>";
            exportSettings.orientation = wijmo.pdf.PdfPageOrientation[menu.selectedItem.Header];
        }

        function setExportMode(menu) {
            menu.header = "@(FlexGridRes.PDFExport_ExportMode): <b>" + menu.selectedItem.Header + "</b>";
            exportSettings.exportMode = wijmo.grid.pdf.ExportMode[menu.selectedItem.Header];
        }

        function setPermissionPrinting(menu) {
            menu.header = "@FlexGridRes.PDFExport_Printing: <b>" + menu.selectedItem.Header + "</b>";
            exportSettings.permissionPrinting = menu.selectedItem.Header;
        }

		function setVersion(menu) {
            menu.header = "PDF version: <b>" + menu.selectedItem.Header + "</b>";
            switch (menu.selectedItem.Header) {
                case "1.3":
                    exportSettings.version = "v1_3";
                    break;
                case "1.4":
                    exportSettings.version = "v1_4";
                    break;
                case "1.5":
                    exportSettings.version = "v1_5";
                    break;
                case "1.6":
                    exportSettings.version = "v1_6";
                    break;
                case "1.7":
                    exportSettings.version = "v1_7";
                    break;
                case "1.7 ExtensionLevel 3":
                    exportSettings.version = "v1_7Ext3";
                    break;
            }
        }

        function getPassword(user) {
            return document.querySelector('#tb' + user + 'Password').value;
        }

        function getPermission(permissionName) {
            if (permissionName == 'Printing') {
                return exportSettings.permissionPrinting || 'NotAllowed';
            } else {
                return document.querySelector('#cb' + permissionName).checked;
            }
        }

        function exportGroupedGrid() {
            var fontFile = { source: 'https://demo.mescius.jp/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' },
                font = new wijmo.pdf.PdfFont('ipaexg');
            wijmo.grid.pdf.FlexGridPdfConverter.export(groupedGrid, 'FlexGrid.pdf', {
                maxPages: 10,
                exportMode: exportSettings.exportMode,
                scaleMode: exportSettings.scaleMode,
                documentOptions: {
                    userPassword: getPassword('User'),
                    ownerPassword: getPassword('Owner'),
                    version: exportSettings.version,
                    permissions: {
                        annotating: getPermission('Annotating'),
                        contentAccessibility: getPermission('ContentAccessibility'),
                        copying: getPermission('Copying'),
                        documentAssembly: getPermission('DocumentAssembly'),
                        fillingForms: getPermission('FillingForms'),
                        modifying: getPermission('Modifying'),
                        printing: getPermission('Printing')
                    },

                    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'
                    }
                },
                embeddedFonts: [fontFile],
                styles: {
                    cellStyle: {
                        backgroundColor: '#ffffff',
                        borderColor: '#c6c6c6',
                        font: font
                    },
                    altCellStyle: {
                        backgroundColor: '#f9f9f9'
                    },
                    groupCellStyle: {
                        backgroundColor: '#dddddd'
                    },
                    headerCellStyle: {
                        backgroundColor: '#eaeaea'
                    }
                }
            });
        }
    </script>
}

<div class="copy well" id="exportSettingsDiv">
    <b>@Html.Raw(FlexGridRes.PDFExport_ExportSettings)</b>
    <c1-menu header="@(FlexGridRes.PDFExport_ScaleMode + " <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="@(FlexGridRes.PDFExport_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="@(FlexGridRes.PDFExport_ExportMode + " <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 id="securitySettingsDiv">
        <p></p>
        <b>@Html.Raw(FlexGridRes.PDFExport_SecuritySettings)</b>
        <div class="panel-body reduce">
            <div class="row">
                <div class="col-sm-3">
                    <input type="text" id="tbUserPassword" class="form-control" placeholder="@FlexGridRes.PDFExport_UserPassword" />
                </div>
                <div class="col-sm-3">
                    <input type="text" id="tbOwnerPassword" class="form-control" placeholder="@FlexGridRes.PDFExport_OwnerPassword" />
                </div>
            </div>
			<br />
			<div class="row">
				<div class="col-sm-3">
                    <c1-menu header="PDF version: <b>1.4</b>" item-clicked="setVersion" selected-index="1">
                        <c1-menu-item header="1.3"></c1-menu-item>
                        <c1-menu-item header="1.4"></c1-menu-item>
                        <c1-menu-item header="1.5"></c1-menu-item>
                        <c1-menu-item header="1.6"></c1-menu-item>
                        <c1-menu-item header="1.7"></c1-menu-item>
                        <c1-menu-item header="1.7 ExtensionLevel 3"></c1-menu-item>
                    </c1-menu>
				</div>
			</div>
            <div class="panel-body reduce">
                <div class="row">
                    <div class="col">
                        <b>@FlexGridRes.PDFExport_Permissions</b> (<i>@FlexGridRes.PDFExport_PermissionsNote</i>)
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="checkbox">
                            <label><input type="checkbox" id="cbAnnotating" />@FlexGridRes.PDFExport_Annotating</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="cbContentAccessibility" />@FlexGridRes.PDFExport_ContentAccessibility</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="cbCopying" />@FlexGridRes.PDFExport_Copying</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="cbDocumentAssembly" />@FlexGridRes.PDFExport_DocumentAssembly</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="cbFillingForms" />@FlexGridRes.PDFExport_FillingForms</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="cbModifying" />@FlexGridRes.PDFExport_Modifying</label>
                        </div>
                    </div>
                </div>

                <c1-menu header="@(FlexGridRes.PDFExport_Printing + " <b>NotAllowed</b>")" item-clicked="setPermissionPrinting">
                    <c1-menu-item header="NotAllowed"></c1-menu-item>
                    <c1-menu-item header="AllowLowResolution"></c1-menu-item>
                    <c1-menu-item header="AllowHighResolution"></c1-menu-item>
                </c1-menu>
            </div>
        </div>
    </div>
</div>

<button class="btn btn-default" onclick="exportGroupedGrid()">@Html.Raw(FlexGridRes.PDFExport_Export)</button>
<br />
<c1-flex-grid id="groupingFlexGrid" selection-mode="ListBox" headers-visibility="All"
              show-groups="true" group-by="Product,Country,Amount" class="grid"
              allow-merging="All" auto-generate-columns="false">
    <c1-flex-grid-column binding="ID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" header="Start Date" format="d"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" header="End Date" format="d"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" header="Amount22" format="c" aggregate="Sum"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" header="Pending" format="c2"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" format="p1"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
    <c1-items-source source-collection="groupedFlexGridData"></c1-items-source>
</c1-flex-grid>

@section Summary{
    <p>@Html.Raw(FlexGridRes.PDFExport_Summary) @Html.Raw(FlexGridRes.PDFExport_GroupingSupport).</p>
}

@section Description{
    <p><b>@Html.Raw(FlexGridRes.PDFExport_Text3)</b></p>

    <p>@Html.Raw(FlexGridRes.PDFExport_Text0)</p>
    <p>@Html.Raw(FlexGridRes.PDFExport_Text1)</p>
    <ul>
        <li>@Html.Raw(FlexGridRes.PDFExport_Li1)</li>
        <li>@Html.Raw(FlexGridRes.PDFExport_Li2)</li>
        <li>@Html.Raw(FlexGridRes.PDFExport_Li3)</li>
    </ul>
    <p>@Html.Raw(FlexGridRes.PDFExport_Text2)</p>
    <ul>
        <li>@Html.Raw(FlexGridRes.PDFExport_Li4)</li>
        <li>@Html.Raw(FlexGridRes.PDFExport_Li5)</li>
        <li>@Html.Raw(FlexGridRes.PDFExport_Li6)</li>
    </ul>
    <p>@Html.Raw(FlexGridRes.PDFExport_Text8)</p>

}

マニュアル

新しいコントロール

人気のコントロール

データ管理

データの視覚化

ナビゲーションとレイアウト

ドキュメント

スケジュール

入力と編集

チュートリアル

新機能

導入ガイド（英語）

サンプルアプリケーション（英語）