FlexGrid

FlexGrid

ツリービュー

このサンプルでは、FlexGridをPDFにエクスポートする方法を紹介します。ツリービューのサポートとフォントの埋め込み.

機能

サンプル

エクスポートの設定：

セキュリティ設定：

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

注釈

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

内容のコピー

文書アセンブリ

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

文書の変更

説明

このサンプルでは、FlexGridPdfConverter で FlexGrid のツリービュー機能をサポートする方法を示します。

このサンプルでは、FlexGrid は Fira フォントを使用し、 2 つの書体 FiraSans-Regular.ttf と FiraSans-Bold.ttf がドキュメントに埋め込まれます。ヘッダーセルの表示には FiraSans-Bold.ttf（太字）書体が使用され、それ以外のコンテンツには FiraSans-Regular.ttf 書体が使用されます。

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

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

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

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

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

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

ソース

PDFExportTreeViewController.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 IList<ITreeItem> pdfExportTreeViewData = null;
        public ActionResult PDFExportTreeView()
        {
            if (pdfExportTreeViewData == null)
            {
                pdfExportTreeViewData = Folder.Create(Startup.Environment.WebRootPath).Children;
            }
            ViewBag.TreeViewData = pdfExportTreeViewData;
            return View();
        }
    }
}

PDFExportTreeView.cshtml

@using C1.Web.Mvc.Grid
@{
    IList<ITreeItem> treeViewData = ViewBag.TreeViewData;
}

@section Styles{
    <style>
        .fixed-top {
            z-index: 999;
            position: fixed;
            top: 0px;
        }

        .reduce {
            padding-bottom: 0px;
        }
    </style>
}

@section Scripts{
    <script>
        var treeViewGrid, exportSettings, settingsDiv, securitySettingsDiv;

        c1.documentReady(function () {
            treeViewGrid = wijmo.Control.getControl("#treeFlexGrid");
            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 exportTreeViewGrid() {
            wijmo.grid.pdf.FlexGridPdfConverter.export(treeViewGrid, 'FlexGrid.pdf', {
                maxPages: 10,
                exportMode: exportSettings.exportMode,
                scaleMode: exportSettings.scaleMode,
                embeddedFonts: [{
                    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
                }],
                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'
                    }
                },
                styles: {
                    cellStyle: {
                        backgroundColor: '#ffffff',
                        borderColor: '#c6c6c6',
                        font: {
                            family: 'fira'
                        }
                    },
                    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="exportTreeViewGrid()">@Html.Raw(FlexGridRes.PDFExport_Export)</button>
<br />
<c1-flex-grid id="treeFlexGrid" class="grid custom-flex-grid"
                child-items-path="Children" auto-generate-columns="false"
                allow-resizing="None" headers-visibility="Column" selection-mode="ListBox">
    <c1-items-source source-collection="treeViewData"></c1-items-source>
    <c1-flex-grid-column binding="Header" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Size" width="80"></c1-flex-grid-column>
</c1-flex-grid>

@section Summary{
    <p>@Html.Raw(FlexGridRes.PDFExport_Summary) @Html.Raw(FlexGridRes.PDFExport_TreeViewSupportAndFontEmbedding).</p>
}

@section Description{
    <p><b>@Html.Raw(FlexGridRes.PDFExport_Text5)</b></p>
    <p><b>@Html.Raw(FlexGridRes.PDFExport_Text6)</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>
}

マニュアル

新しいコントロール

人気のコントロール

データ管理

データの視覚化

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

ドキュメント

スケジュール

入力と編集

チュートリアル

新機能

導入ガイド（英語）

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