ASP.NET Web API コントロール
LinearGaugeの画像エクスポート
サービス > 画像サービス > エクスポートサービス > LinearGaugeの画像エクスポート

このセクションでは、クライアントアプリケーションを通してWeb APIサービスプロジェクトを呼び出し、LinearGaugeコントロールを画像としてエクスポートするための関数を追加する方法を説明します。

手順1：サービスを呼び出す

手順2：クライアントプロジェクトを実行する

次の図は、上記の手順を実行した後のLinearGaugeを示しています。

手順1：サービスを呼び出す

Web APIサービスを呼び出すには、次の手順を実行します。

  1. ComponentOne Web APIクライアントJavaScriptファイルとその参照をMVCまたはHTMLプロジェクトに追加します（詳細な手順については、「Web APIクライアントJavaScriptの追加」を参照してください）。
  2. Client JavaScript Helperを使用して、エクスポート機能を実装するための関数を作成します。

    LinearGaugeコントロールを画像にエクスポートするには、次のコードを［Views］→［LinearGauge］→［Index.cshtml］に追加します。

    Index.cshtml
    コードのコピー 
    <script type="text/javascript">
function exportImage() {
    var exporter = new wijmo.gauge.ImageExporter();
    imageType = document.getElementById("mySelect").value;
    control = wijmo.Control.getControl('#linearGauge');
    exporter.requestExport(control,
    "http://demos.componentone.com/ASPNET/C1WebAPIService/api/export/image", {
        fileName: "exportLinearGauge",
        type: imageType,
    });
}
</script>

    LinearGaugeコントロールを画像にエクスポートするには、次のマークアップを<script>タグ内に追加します。

    JavaScript
    コードのコピー 
    <script type="text/javascript">
function exportImage() {
var exporter = new wijmo.gauge.ImageExporter();
var gauge = wijmo.Control.getControl("#LinearGauge");
exporter.requestExport(gauge, " http://demos.componentone.com/ASPNET/C1WebAPIService/api/export/image",
{
fileName: "exportLinearGauge",type: Png,
});
}
</script>

    メモ： HTMLアプリケーションでWijmo 5コントロールを使用するには、いくつかのWijmoファイルへの参照をHTMLページに含める必要があります。これらのWijmoファイルをダウンロードしてアプリケーション内の適切なフォルダにコピーするか、クラウド上のコンテンツ配信ネットワーク（CDN）でホストされているWijmoファイルを参照します。Wijmoスクリプトファイルを「Scripts」というフォルダに、cssファイルを「Styles」というフォルダに、Wijmoコントロールに固有のスクリプトファイルを「Controls」フォルダにダウンロードして配置した場合は、HTMLページの<head>タグ内に次の参照を追加します。

    HTML
    コードのコピー 
    <script src="Controls/wijmo.min.js" type="text/javascript"></script>
<link href="Styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Controls/wijmo.gauge.min.js" type="text/javascript"></script>
<script src="Scripts/webapiclient.min.js" type="text/javascript"></script>
  3. ボタンを追加し、ボタンクリックでエクスポート機能を呼び出して、エクスポート要求が開始されるようにします。
    • 次のコードを［Views］→［MVCFlexGrid］→［Index.cshtml］に追加して、エクスポート機能に対応するボタンを追加します。

    次のコードを［Views］→［LinearGauge］→［Index.cshtml］に追加して、エクスポート機能に対応するボタンを追加します。

    Index.cshtml
    コードのコピー 
    <select id="mySelect">
    <option selected>Png</option>
    <option>Jpg</option>
    <option>Gif</option>
    <option>Bmp</option>
    <option>Tiff</option>
</select>
<button onclick="exportImage()" title="Export">Export</button>

    次のマークアップを<body>タグ内に追加して、エクスポート機能に対応するボタンを作成します。

    HTML
    コードのコピー 
    <button onclick="exportImage()" title="Export">Export</button>

先頭に戻る

手順2：クライアントプロジェクトを実行する

MVCアプリケーション

HTMLアプリケーション

［Export］ボタンがコントロールと共に出力に表示されます。このボタンを使用して、コントロールを画像としてエクスポートできます。

MVCおよびWijmo5 LinearGaugeコントロールを使用した画像エクスポートサービスのデモサンプルをぜひご覧ください。

先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.