FlexGrid

FlexGrid

機能

サンプル

セキュリティ設定：

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

注釈

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

内容のコピー

文書アセンブリ

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

文書の変更

説明

このサンプルは、タグ付きPDFを作成する方法を示します。このサンプルでは、tagged、tagContentプロパティを使用して、エクスポート時にセルごとにタグを追加します。このサンプルでは、tagメソッドを使用してタグを作成し、コンテンツにマークを付け、addTagメソッドを使用して論理ドキュメントツリーにタグを追加します。

注意: タグ付きPDFには、ドキュメントバージョン1.4以降が必要です。

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

ソース

PDFExportTagsController.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> pdfExportTagsData = Sale.GetData(500);
        public ActionResult PDFExportTags()
        {
            FullCountry taggedCountry = FullCountry.GetCountry("US");
            ViewBag.taggedCountry = taggedCountry;

            IEnumerable<Sale> taggedFlexGridData = pdfExportTagsData.Where(s => taggedCountry.Name.Equals(s.Country)).Take(10);
            ViewBag.TaggedFlexGridData = taggedFlexGridData;

            IEnumerable<Sale> taggedSumByProducts = taggedFlexGridData
                .GroupBy(s => s.Product)
                .Select(g => new Sale
                {
                    Product = g.Key,
                    Amount2 = g.Sum(s => s.Amount2)
                });
            ViewBag.TaggedSumByProducts = taggedSumByProducts;

            return View();
        }
    }
}

PDFExportTags.cshtml

@using C1.Web.Mvc.Grid
@{
    IEnumerable<Sale> taggedFlexGridData = ViewBag.TaggedFlexGridData;
    FullCountry taggedCountry = ViewBag.taggedCountry;
    IEnumerable<Sale> taggedSumByProducts = ViewBag.TaggedSumByProducts;
}

@section Styles{
    <style>
        .fixed-top {
            z-index: 999;
            position: fixed;
            top: 0px;
        }

        .reduce {
            padding-bottom: 0px;
        }
    </style>
}

@section Scripts{
    <script>
        var taggedGrid, taggedFlexPie, exportSettings, settingsDiv, securitySettingsDiv;

        c1.documentReady(function () {
            taggedGrid = wijmo.Control.getControl("#taggedFlexGrid");
            taggedFlexPie = wijmo.Control.getControl("#taggedFlexPie");
            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 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 formatItemOfTaggedGrid(args) {
            if (args.panel.columns[args.col].binding != "Discount") {
                return;
            }
            var data = parseFloat(args.data);
            if (!isNaN(data)) {
                var r = args.clientRect,
                    x = r.right + 2,
                    y = r.top + (r.bottom - r.top) / 2 - 3;

                args.tagContent = args.canvas.beginTagContent(wijmo.pdf.PdfTagType.P);
                args.canvas.drawText(data > 10 ? "High discount" : (data < 8 ? "Low discount" : "Medium discount"), x, y, {
                    font: new wijmo.pdf.PdfFont('times', 10, 'italic', 'normal'),
                    brush: wijmo.Color.fromString(data > 10 ? "#FF0000" : (data < 8 ? "#448800" : "#888800"))
                });
            }
            args.canvas.endTagContent();
        }

        function exportTaggedGrid() {
            var fontFile = { source: 'https://demo.mescius.jp/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' },
                font = new wijmo.pdf.PdfFont('ipaexg'),
                fontNormal = new wijmo.pdf.PdfFont('times', 12, 'normal', 'normal'),
                fontBold = new wijmo.pdf.PdfFont('times', 12, 'normal', 'bold'),
                fontHeader = new wijmo.pdf.PdfFont('times', 20, 'normal', 'bold');

            var doc = new wijmo.pdf.PdfDocument({
                userPassword: getPassword('User'),
                ownerPassword: getPassword('Owner'),
                version: exportSettings.version,
                tagged: true,
                permissions: {
                    annotating: getPermission('Annotating'),
                    contentAccessibility: getPermission('ContentAccessibility'),
                    copying: getPermission('Copying'),
                    documentAssembly: getPermission('DocumentAssembly'),
                    fillingForms: getPermission('FillingForms'),
                    modifying: getPermission('Modifying'),
                    printing: getPermission('Printing')
                },
                pageSettings: {
                    margins: {
                        left: 50,
                        right: 20,
                        top: 20,
                        bottom: 20
                    }
                },
                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'
                },
                ended: function (_, args) {
                    wijmo.pdf.saveBlob(args.blob, 'FlexGrid.pdf');
                }
            });

            // Title and summary
            doc.addTag(doc.tag(wijmo.pdf.PdfTagType.H1, function() {
                doc.drawText('Sale Report', undefined, undefined, { font: fontHeader });
            }));

            doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() {
                doc.drawText('This report shows the state of sales in a country.', undefined, undefined, { font: fontNormal });
            }));

            doc.moveDown(2);

            // Country information
            doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() {
                doc.drawText('Country: ', undefined, undefined, { font: fontBold, continued: true });
                doc.drawText('@taggedCountry.Name', undefined, undefined, { font: fontNormal });
            }));

            doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() {
                doc.drawText('Name: ', undefined, undefined, { font: fontBold, continued: true });
                doc.drawText('United States of America', undefined, undefined, { font: fontNormal });
            }));

            doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() {
                doc.drawText('Area: ', undefined, undefined, { font: fontBold, continued: true });
                doc.drawText('9.834 million km²', undefined, undefined, { font: fontNormal });
            }));

            doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() {
                doc.drawText('Population: ', undefined, undefined, { font: fontBold, continued: true });
                doc.drawText('333,733,637', undefined, undefined, { font: fontNormal });
            }));

            doc.moveDown(2);

            // Add grid content
            doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function () {
                doc.drawText('Sale details: ', undefined, undefined, { font: fontBold });
            }));
            wijmo.grid.pdf.FlexGridPdfConverter.draw(taggedGrid, doc, doc.width+200, null, {
                embeddedFonts: [fontFile],
                styles: {
                    cellStyle: {
                        backgroundColor: '#ffffff',
                        borderColor: '#c6c6c6',
                        font: font
                    },
                    altCellStyle: {
                        backgroundColor: '#f9f9f9'
                    },
                    groupCellStyle: {
                        backgroundColor: '#dddddd'
                    },
                    headerCellStyle: {
                        backgroundColor: '#eaeaea'
                    }
                },
                formatItem: formatItemOfTaggedGrid
            });

            doc.moveDown(2);

            // Add Chart
            taggedFlexPie.saveImageToDataUrl(wijmo.chart.ImageFormat.Png, function(url) {
                doc.addTag(doc.tag(wijmo.pdf.PdfTagType.Figure, [
                    doc.tag(wijmo.pdf.PdfTagType.Caption, function() {
                        doc.drawText('Total revenues by products:', 0, doc.y, { font: fontBold });
                    }),
                    function() {
                        doc.drawImage(url, 15, doc.y, { height: doc.height * 0.4 });
                    }
                ], { actual: 'The chart' }));

                // Finish the document.
                doc.end();
            });
        }

    </script>
}

<div class="copy well" id="exportSettingsDiv">
    <div id="securitySettingsDiv">
        <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="exportTaggedGrid()">@Html.Raw(FlexGridRes.PDFExport_Export)</button>
<br />
<c1-flex-grid id="taggedFlexGrid" selection-mode="ListBox" headers-visibility="All"
                class="grid" height="200px" auto-generate-columns="false">
    <c1-flex-grid-column binding="ID" width="60"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" header="Start Date" format="d" width="100"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" header="End Date" format="d" width="100"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product" width="80"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color" width="60"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" header="Revenue" format="c2" width="100"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" format="p1" width="80"></c1-flex-grid-column>
    <c1-items-source source-collection="@taggedFlexGridData"></c1-items-source>
</c1-flex-grid>

<c1-flex-pie id="taggedFlexPie" inner-radius="0.65f" binding-name="Product" binding="Amount2" width="50%">
    <c1-items-source source-collection="taggedSumByProducts"></c1-items-source>
    <c1-flex-pie-datalabel content="{value:c1}" position="@C1.Web.Mvc.Chart.PieLabelPosition.Inside"></c1-flex-pie-datalabel>
</c1-flex-pie>

@section Summary{
    <p>@Html.Raw(FlexGridRes.PDFExport_Summary) @Html.Raw(FlexGridRes.PDFExport_Title4).</p>
}

@section Description{
    <p>@Html.Raw(FlexGridRes.PDFExport_Text9)</p>
    <p><b>@Html.Raw(FlexGridRes.PDFExport_Text10)</b></p>
    <p>@Html.Raw(FlexGridRes.PDFExport_Text8)</p>
}

マニュアル

新しいコントロール

人気のコントロール

データ管理

データの視覚化

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

ドキュメント

スケジュール

入力と編集

チュートリアル

新機能

導入ガイド（英語）

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