Features

PDFエクスポート

PDFエクスポート

このサンプルは、PDFKitベースのJavaScriptライブラリであるFlexGridPdfConverterを使用して、サーバー側のコードを使用することなく、MultiRowのコンテンツをPDF(Portable Document Format)にエクスポートする方法を示しています。

機能

PDFKitベースのJavaScriptライブラリであるFlexGridPdfConverterを使用すると、
MultiRowコントロールのコンテンツをサーバー側のコードを使用することなくPDF(Portable Document Format)にエクスポートできます。

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

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

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

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

このサンプルでは、MultiRowは、Firaフォント、および2つの書体FiraSans-Regular.ttfFiraSans-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 System.Web.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.grapecity.com/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(Resources.MultiRowExplorer.PdfExport_Text0)</p>

    <p>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text1)</p>

    <ul>
        <li>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text5)</li>
        <li>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text6)</li>
        <li>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text7)</li>
    </ul>
    <p>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text2)</p>

    <ul>
        <li>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text8)</li>
        <li>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text9)</li>
        <li>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text10)</li>
    </ul>
    <p>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text3)</p>

    <p>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text4)</p>

    <ul>
        <li>
            <b>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text11)</b>
        </li>
        <li>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text12)</li>
    </ul>
</div>

<div class="copy well" id="exportSettingsDiv">
    <b>@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text13)</b>
    <br />
    <br />
    <div class="col-md-12 col-xs-12">
        @(Html.C1().Menu().Header("Scale Mode: <b>ActualSize</b>").OnClientItemClicked("setScaleMode")
                .MenuItems(items =>
                {
                    items.Add("ActualSize");
                    items.Add("PageWidth");
                    items.Add("SinglePage");
                }))
        @(Html.C1().Menu().Header("Orientation: <b>Portrait</b>").OnClientItemClicked("setOrientation")
                .MenuItems(items =>
                {
                    items.Add("Portrait");
                    items.Add("Landscape");
                }))
        @(Html.C1().Menu().Header("Export Mode: <b>All</b>").OnClientItemClicked("setExportMode")
                .MenuItems(items =>
                {
                    items.Add("All");
                    items.Add("Selection");
                }))
    </div>
    <div class="checkbox-div">
        <label>
            <input type="checkbox" id="embedFontsCheckBox" class="checkbox" /> @Html.Raw(Resources.MultiRowExplorer.PdfExport_Text15)
        </label>
    </div>
</div>

<button class="btn btn-default" onclick="exportPdf()">@Html.Raw(Resources.MultiRowExplorer.PdfExport_Text16)</button>
<br />
@(Html.C1().MultiRow<Sale>().Id("exportPdfMultiRow")
        .Bind(Model)
        .SelectionMode(SelectionMode.ListBox)
        .HeadersVisibility(HeadersVisibility.All)
        .ShowGroups(true)
        .GroupBy("Product", "Country")
        .CssClass("multirow custom-multi-row")
        .LayoutDefinition(LayoutDefinitionsBuilders.Sales)
)

@section Summary{
    @Html.Raw(Resources.MultiRowExplorer.PdfExport_Text14)
}