Features

PDF Export

PDF Export

You can use the FlexGridPdfConverter, a PDFKit-based JavaScript library, to export MultiRow to PDF (Portable Document Format) without using any server-side code.

Features

You can use the FlexGridPdfConverter, a PDFKit-based JavaScript library, to export MultiRow to PDF (Portable Document Format) without using any server-side code.

To export a MultiRow, you need to use the FlexGridPdfConverter.export function that takes the following arguments:

  • A MultiRow instance.
  • Name of the file to export.
  • Export settings.

In this sample, you can change the following export settings using the menus below:

  • scaleMode: Determines how the MultiRow content should be scaled in order to fit the page.
  • orientation: Determines the orientation of pages.
  • exportMode: Determines which part of the MultiRow should be exported (all of the data or only the current selection).

In this sample, MultiRow uses font Fira and two typefaces, FiraSans-Regular.ttf and FiraSans-Bold.ttf. The FiraSans-Bold.ttf (boldface) typeface is used to display the header cells, and the FiraSans-Regular.ttf typeface is used for rest of the content.

To embed the fonts into the PDF, the following export settings are used:

  • embeddedFonts: Provides information to the export library, about various custom fonts to be embedded, such as URL, name, style, weight.
  • styles: It is used to set up the style for the grid elements and link them with the embedded fonts.
Export Settings:


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 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
                    }]
                    : [],
                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'
                    },
                    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>
        You can use the <b>FlexGridPdfConverter</b>, a <a href="https://github.com/devongovett/pdfkit">PDFKit</a>-based JavaScript library,
        to export <b>MultiRow</b> to PDF (Portable Document Format) without using any server-side code.
    </p>
    <p>
        To export a <b>MultiRow</b>, you need to use the <b>FlexGridPdfConverter.export</b> function that takes the following arguments:
    </p>
    <ul>
        <li>A MultiRow instance.</li>
        <li>Name of the file to export.</li>
        <li>Export settings.</li>
    </ul>
    <p>
        In this sample, you can change the following export settings using the menus below:
    </p>
    <ul>
        <li><b>scaleMode</b>: Determines how the MultiRow content should be scaled in order to fit the page.</li>
        <li><b>orientation</b>: Determines the orientation of pages.</li>
        <li><b>exportMode</b>: Determines which part of the MultiRow should be exported (all of the data or only the current selection).</li>
    </ul>
    <p>
        In this sample, <b>MultiRow</b> uses font <a href="https://github.com/mozilla/Fira">Fira</a> and two typefaces, <b>FiraSans-Regular.ttf</b> and <b>FiraSans-Bold.ttf</b>.
        The FiraSans-Bold.ttf (boldface) typeface is used to display the header cells, and the FiraSans-Regular.ttf typeface is used for rest of the content.
    </p>
    <p>
        To embed the fonts into the PDF, the following export settings are used:
    </p>
    <ul>
        <li>
            <b>embeddedFonts</b>: Provides information to the export library, about various custom fonts to be embedded, such as URL, name, style, weight.
        </li>
        <li><b>styles</b>: It is used to set up the style for the grid elements and link them with the embedded fonts.</li>
    </ul>
</div>

<div class="copy well" id="exportSettingsDiv">
    <b>Export Settings:</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"/> Embed Fonts
        </label>
    </div>
</div>

<button class="btn btn-default" onclick="exportPdf()">Export</button>
<br />

<c1-multi-row id="exportPdfMultiRow" class="multirow custom-multi-row" is-read-only="true"
              show-groups="true" group-by="Product,Country" selection-mode="ListBox">
    <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"></c1-multi-row-cell>
        <c1-multi-row-cell binding="End"></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{
    You can use the FlexGridPdfConverter, a PDFKit-based JavaScript library, to export MultiRow to PDF (Portable Document Format) without using any server-side code.
}