PDF としてエクスポート

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

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

paperKind: PDF のエクスポートに使用する用紙の種類（レター、リーガルなど）
- 有効値: .NET system.drawing.printing PaperKind 列挙型の任意の値
pageSize: 独自のページサイズ（ポイント単位）。paperKind が custom に設定されている場合にのみ有効です。
- width
- height
landscape: PDF エクスポート時のページの向きを示すブール値
autoFitWidth: グリッドのコンテンツサイズを、エクスポート後のページ幅に自動的に合わせるかどうかを示すブール値
margins: ページの余白（ポイント単位）
- top
- left
- right
- bottom
repeatHeader: グリッドのヘッダを全ページの上端に表示するかどうかを示すブール値

クイックスタート

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

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

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

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

<table id="wijgrid" /> <input type="button" value="Export to PDF" id="exportPDF"/>

参照	コードのコピー
<!--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.20173.128.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.20173.128", 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>

マークアップ	コードのコピー
<table id="wijgrid" /> <input type="button" value="Export to PDF" id="exportPDF"/>

<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>

スクリプト

コードのコピー

<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>

HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。［Export to PDF］ボタンをクリックすると、ダウンロードフォルダにファイルがエクスポートされます。ファイルを開くときにオーナーパスワードまたはユーザーパスワードを指定してみて、許可される操作の違いを確認してください。

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

クイックスタート

関連トピック

参照