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

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

PDF の設定

ドロップダウンして、チャートのエクスポートに使用可能な PDF 設定についての情報を表示します。

クイックスタート

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

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

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

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

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

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

  4. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、ウィジェットを初期化してデータを供給します。また、ボタンがクリックされると、以下の設定を使用してチャートをエクスポートします。
    •            
    • チャートエクスポート用 API へのパスは、ComponentOne デモサーバーに転送されます。
    • エクスポートするチャートは、棒グラフウィジェットのマークアップに指定された id 属性として設定されます。
    • エクスポートするファイルの種類は PDF に設定されます。
    • エクスポートするファイルの名前は MyChartPDFExport に設定されます。
    • 各 PDF オプションにより、品質より速度を優先するように設定されます。また、ファイルを開くときにオーナーパスワードを入力した場合にのみ、コンテンツの編集とコピーが可能になり、ユーザーパスワードを入力した場合にのみ、ファイルを開くことが可能になるように設定されます。
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
require(["wijmo.wijbarchart", "chartexport"], function () {
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            seriesList: [{
                label: "US",
                legendEntry: true,
                data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 30.56] }
            }]
        });
    });
    $("#exportPDF").button().click(function () {
        wijmo.exporter.exportChart({
            serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/chart",
            chart: $("#wijbarchart").data("wijmo-wijbarchart"),
            exportFileType: wijmo.exporter.ExportFileType.Pdf,
            fileName: "MyChartPDFExport",
            pdf: {
                imageQuality: wijmo.exporter.ImageQuality.Low,
                compression: wijmo.exporter.CompressionType.BestSpeed,
                fontType: wijmo.exporter.FontType.Standard,
                author: "Ninja Code Monkey",
                creator: "Wijmo wijbarchart",
                subject: "Console Wars",
                title: "Console Wars",
                producer: "Wijmo exporter",
                keywords: "Wii, XBOX360, PS3",
                encryption: wijmo.exporter.PdfEncryptionType.Standard128,
                ownerPassword: "MINE!",
                userPassword: "ours",
                allowCopyContent: false,
                allowEditAnnotations: true,
                allowEditContent: false,
                allowPrint: true
            }
        });
    });
});
</script>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。［Export to PDF］ボタンをクリックすると、ダウンロードフォルダにファイルがエクスポートされます。ファイルを開くときにオーナーパスワードまたはユーザーパスワードを指定してみて、許可される操作の違いを確認してください。

関連トピック

エクスポート

参照

PdfSetting インターフェース
ExportSetting インターフェース
ChartExportSetting インターフェース

 

 

Copyright © GrapeCity inc. All rights reserved.