Wijmo UI for the Web
Grid PDF Exports
Wijmo User Guide > Concepts > Exporting > Exporting Grids > Grid PDF Exports
Show All
Hide All

In this topic, you'll learn how to add references for the gridexport and wijgrid to an HTML project using HTML markup and jQuery script, and to customize a number of PDF settings for the export.

PDF Settings for Grid Only

Drop down to view PDF settings that you can use for grid exports

For common PDF export settings, refer to Export PDF Settings

Quick Start

  1. To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.

    Drop down and copy markup

    Paste in your favorite text editor.
    Copy Code 
    <!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
  2. Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

    Drop down and copy references to paste inside the head tags

    References
    Copy Code 
    <!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>
  3. Add the following markup within the <body> tags to create the grid widget and button.
    • The <table> element creates the grid widget, and we call its id attribute in jQuery to initialize it.
    • The <input> element creates the button, and we call its id attribute in jQuery to export the grid in the click function.

    Drop down and copy markup to paste inside the body tags

    Markup
    Copy Code 
    <table id="wijgrid" />
<input type="button" value="Export to PDF" id="exportPDF"/>
  4. Within the <head> tags, below the references, add the following script to initialize the widget and populate it with data, and to export the grid when the button is clicked using the following settings.
    •            
    • The path to the grid export API is directed to the ComponentOne demo server.
    • The grid to export is set to the id attribute of the grid widget's markup.
    • The type of file to export is set to Pdf.
    • The name of the exported file is set to MyGridPDFExport.
    • The pdf options are set to use a custom paper size and custom margins, to favor speed over quality, and to allow editing and copying of content only if you supply the owner password when opening the file, and to allow opening the file only if you supply the user password.
    Script
    Copy Code 
    <script id="scriptInit" type="text/javascript">
require(["wijmo.wijgrid", "gridexport"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            cellClicked: function (e, args) {
                alert(args.cell.value());
            },
            allowSorting: true,
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Country"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    $("#exportPDF").button().click(function () {
        wijmo.exporter.exportGrid({
            serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/grid",
            grid: $("#wijgrid").data("wijmo-wijgrid"),
            exportFileType: wijmo.exporter.ExportFileType.Pdf,
            fileName: "MyGridPDFExport",
            pdf: {
                imageQuality: wijmo.exporter.ImageQuality.Low,
                compression: wijmo.exporter.CompressionType.BestSpeed,
                fontType: wijmo.exporter.FontType.Standard,
                
                author: "Ninja Code Monkey",
                creator: "Wijmo wijgrid",
                subject: "Hockey Players",
                title: "Hockey Players",
                producer: "Wijmo exporter",
                keywords: "hockey, Canada, US",
                
                encryption: wijmo.exporter.PdfEncryptionType.Standard128,
                ownerPassword: "MINE!",
                userPassword: "ours",
                allowCopyContent: false,
                allowEditAnnotations: true,
                allowEditContent: false,
                allowPrint: true,
                
                paperKind: wijmo.exporter.PaperKind.Custom,
                pageSize: {
                    width: 300,
                    height: 400
                },
                margins: {
                    top: 10,
                    left: 10,
                    right: 10,
                    bottom: 10
                }
            }
        });
    });
});
</script>
  5. Save your HTML file and open it in a browser. The widget appears like the following live widget. Click the Export to PDF button. The file appears in your Downloads folder. Open the file with the owner or user password to see the differences in what is allowed.

See Also
Exporting

Reference

ExportSetting Interface
PdfSetting Interface
GridPdfSetting Interface
wijgrid API

Widgets

Grid

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page