製品版のみの機能

Javascript Excel - Excel の数式

このサンプルでは、Infragistics Ignite UI for jQuery JavaScript Excel ライブラリを使用してカスタム数式を持つ Excel ワークシートを作成する方法を紹介します。


Result in Excel

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。

この例では、AVERAGE 関数を使用して数値の列に平均値を表示します。Excel ライブラリをブラウザー、あるいは Node.js などの JavaScript ランタイムでも使用できます。

コード ビュー

クリップボードへコピー 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style>
        .right {
            float: right;
        }

        #exportButton {
            float: left;
        }
    </style>
    <!--Required scripts-->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- External files for exporting -->
    <script src="/js/external/FileSaver.js"></script>
    <script src="/js/external/Blob.js"></script>

    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>

    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_core.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_collections.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_text.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_io.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_ui.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.documents.core_core.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_collectionsextended.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.excel_core.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_threading.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.ext_web.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.xml.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.documents.core_openxml.js"></script>
    <script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/infragistics.excel_serialization_openxml.js"></script>
</head>
<body>
    <br />
    <button id="exportButton" onclick="createFormulasWorkbook()">ファイルを作成</button>
    <br />
    <img alt="Result in Excel" src="/images/samples/client-side-excel-library/excel-formulas-ja.png" />
    <script>

        function createFormulasWorkbook() {

            var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
            var sheet = workbook.worksheets().add('Sheet1');
            sheet.columns(0).setWidth(180, $.ig.excel.WorksheetColumnWidthUnit.pixel);
            sheet.columns(1).setWidth(116, $.ig.excel.WorksheetColumnWidthUnit.pixel);
            sheet.columns(2).setWidth(124, $.ig.excel.WorksheetColumnWidthUnit.pixel);

            // Create some rows and columns of data
            sheet.getCell('A1').value('プロジェクト/クライアント');
            sheet.getCell('B1').value('状態');
            sheet.getCell('C1').value('予想期間 (月)');

            sheet.getCell('A2').value('インフラジスティックス銀行');
            sheet.getCell('B2').value('処理中');
            sheet.getCell('C2').value(7);

            sheet.getCell('A3').value('アルバリス社');
            sheet.getCell('B3').value('交渉');
            sheet.getCell('C3').value(3);

            sheet.getCell('A4').value('パナモラミック スタジオ');
            sheet.getCell('B4').value('交渉');
            sheet.getCell('C4').value(15);

            sheet.getCell('A5').value('Werkz.me');
            sheet.getCell('B5').value('変更要求');
            sheet.getCell('C5').value(24);

            // Add a formula to average one fo the columns of data
            sheet.getCell('C6').applyFormula('=AVERAGE(C2:C5)');

            // Alternatively, the formula can be parsed and applied manually, like so:
            //var formula = $.ig.excel.Formula.parse('=AVERAGE(C2:C5)', $.ig.excel.CellReferenceMode.a1);
            //formula.applyTo(sheet.getCell('C6'));

            // Save the workbook
            saveWorkbook(workbook, "Formulas.xlsx");
        }

        function saveWorkbook(workbook, name) {
            workbook.save({ type: 'blob' }, function (data) {
                saveAs(data, name);
            }, function (error) {
                alert('エクスポート エラー: : ' + error);
            });
        }

    </script>
</body>
</html>