Wijmo UI for the Web
PDF としてエクスポート
Wijmo ユーザーガイド > 概念 > エクスポート > グリッドのエクスポート > PDF としてエクスポート
全て展開全て展開
すべて折りたたむすべて折りたたむ

ここでは、HTML マークアップおよび jQuery スクリプトを使用して、gridexport と wijgrid への参照を HTML プロジェクトに追加する方法と、エクスポートに関連する多数の PDF 設定のカスタマイズ方法について、詳しく説明します。

グリッドのみに対する PDF 設定

クイックスタート

  1. テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。

    ドロップダウンしてマークアップをコピーします

  2. 依存ファイルへのリンクを HTML ページの <head>タグ内に追加します。最新の依存ファイルについては、次の場所にあるコンテンツ配信ネットワーク（CDN）ファイルを参照してください。wijmo cdn

    ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

  3. <body>タグ内に次のマークアップを追加して、グリッドウィジェットとボタンを作成します。
    • <table>要素はグリッドウィジェットを作成します。jQuery 内では、この id属性を呼び出すことでウィジェットを初期化します。
    • <input> 要素はボタンを作成します。jQuery 内でこの id 属性を呼び出すことで、クリックの実行時にグリッドをエクスポートします。

    ドロップダウンしてマークアップをコピーし、body タグ内に貼り付けます。

  4. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、ウィジェットを初期化してデータを供給します。また、ボタンがクリックされると、以下の設定を使用してグリッドをエクスポートします。
    •            
    • グリッドエクスポート用 API へのパスは、ComponentOne デモサーバーに転送されます。
    • エクスポートするグリッドは、グリッドウィジェットのマークアップに指定された id 属性として設定されます。
    • エクスポートするファイルの種類は Pdf に設定されます。
    • エクスポートするファイルの名前は MyGridPDFExport に設定されます。
    • 各 PDF オプションにより、カスタム用紙サイズとカスタム余白を使用し、品質より速度を優先するように設定されます。また、ファイルを開くときにオーナーパスワードを入力した場合にのみ、コンテンツの編集とコピーが可能になり、ユーザーパスワードを入力した場合にのみ、ファイルを開くことが可能になるように設定されます。
    スクリプト
    コードのコピー 
    <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. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。［Export to PDF］ボタンをクリックすると、ダウンロードフォルダにファイルがエクスポートされます。ファイルを開くときにオーナーパスワードまたはユーザーパスワードを指定してみて、許可される操作の違いを確認してください。

関連トピック

エクスポート
Grid

参照

ExportSetting インターフェース
PdfSetting インターフェース
GridPdfSetting インターフェース
wijgrid メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.