Merge pull request #1357 from ONLYOFFICE/feature/sse-print

Feature/sse print

apps/spreadsheeteditor/main/app/controller/LeftMenu.js

@@ -107,6 +107,7 @@ define([
                 if ( !this.leftMenu.panelHistory.isVisible() )
                     this.clickMenuFileItem(null, 'history');
             }, this));
+            Common.NotificationCenter.on('file:print', _.bind(this.clickToolbarPrint, this));
         },
 
         onLaunch: function() {
@@ -534,6 +535,10 @@ define([
                 this.leftMenu.menuFile.hide();
         },
 
+        clickToolbarPrint: function () {
+            this.leftMenu.showMenu('file:printpreview');
+        },
+
         changeToolbarSaveState: function (state) {
             var btnSave = this.leftMenu.menuFile.getButton('save');
             btnSave && btnSave.setDisabled(state);

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -2522,7 +2522,8 @@ define([
                     this.getApplication().getController('RightMenu').updateMetricUnit();
                     this.getApplication().getController('Toolbar').getView('Toolbar').updateMetricUnit();
                 }
-                this.getApplication().getController('Print').getView('MainSettingsPrint').updateMetricUnit();
+                //this.getApplication().getController('Print').getView('MainSettingsPrint').updateMetricUnit();
+                this.getApplication().getController('Print').getView('PrintWithPreview').updateMetricUnit();
             },
 
             _compareActionStrong: function(obj1, obj2){
@@ -2651,7 +2652,7 @@ define([
 
             onPrint: function() {
                 if (!this.appOptions.canPrint || Common.Utils.ModalWindow.isVisible()) return;
-                Common.NotificationCenter.trigger('print', this);
+                Common.NotificationCenter.trigger('file:print', this);
             },
 
             onPrintUrl: function(url) {

apps/spreadsheeteditor/main/app/controller/Print.js

@@ -39,12 +39,14 @@ define([
 
     SSE.Controllers.Print = Backbone.Controller.extend(_.extend({
         views: [
-            'MainSettingsPrint'
+            'MainSettingsPrint',
+            'PrintWithPreview'
         ],
 
         initialize: function() {
             var value = Common.localStorage.getItem("sse-print-settings-range");
             value = (value!==null) ? parseInt(value) : Asc.c_oAscPrintType.ActiveSheets;
+            this._currentPrintType = value;
 
             this.adjPrintParams = new Asc.asc_CAdjustPrint();
             this.adjPrintParams.asc_setPrintType(value);
@@ -52,13 +54,25 @@ define([
             this._changedProps = null;
             this._originalPageSettings = null;
 
+            this._navigationPreview = {
+                pageCount: false,
+                currentPage: 0
+            };
+
+            this._isPreviewVisible = false;
+
             this.addListeners({
-                'MainSettingsPrint': {
+                /*'MainSettingsPrint': {
                     'show': _.bind(this.onShowMainSettingsPrint, this),
                     'render:after': _.bind(this.onAfterRender, this)
+                },*/
+                'PrintWithPreview': {
+                    'show': _.bind(this.onShowMainSettingsPrint, this),
+                    'render:after': _.bind(this.onAfterRender, this),
+                    'changerange': _.bind(this.onChangeRange, this, false)
                 },
                 'PrintSettings': {
-                    'changerange': _.bind(this.onChangeRange,this)
+                    'changerange': _.bind(this.onChangeRange, this, true)
                 }
             });
             Common.NotificationCenter.on('print', _.bind(this.openPrintSettings, this, 'print'));
@@ -66,19 +80,42 @@ define([
         },
 
         onLaunch: function() {
-            this.printSettings = this.createView('MainSettingsPrint');
+            //this.printSettings = this.createView('MainSettingsPrint');
+            this.printSettings = this.createView('PrintWithPreview');
         },
 
         onAfterRender: function(view) {
+            var me = this;
+            this.printSettings.menu.on('menu:hide', _.bind(this.onHidePrintMenu, this));
             this.printSettings.cmbSheet.on('selected', _.bind(this.comboSheetsChange, this, this.printSettings));
-            this.printSettings.btnOk.on('click', _.bind(this.querySavePrintSettings, this));
+            this.printSettings.btnsSave.forEach(function (btn) {
+                btn.on('click', _.bind(me.querySavePrintSettings, me, false));
+            });
+            this.printSettings.btnsPrint.forEach(function (btn) {
+                btn.on('click', _.bind(me.querySavePrintSettings, me, true));
+            });
+            this.printSettings.btnPrevPage.on('click', _.bind(this.onChangePreviewPage, this, false));
+            this.printSettings.btnNextPage.on('click', _.bind(this.onChangePreviewPage, this, true));
+            this.printSettings.txtNumberPage.on({
+                'keypress:after':  _.bind(this.onKeypressPageNumber, this),
+                'keyup:after': _.bind(this.onKeyupPageNumber, this)
+            });
+            this.printSettings.chIgnorePrintArea.on('change', _.bind(this.updatePreview, this));
+
             this.fillComponents(this.printSettings);
             this.registerControlEvents(this.printSettings);
+
+            Common.NotificationCenter.on('window:resize', _.bind(function () {
+                if (this._isPreviewVisible) {
+                    this.api.asc_drawPrintPreview(this._navigationPreview.currentPage);
+                }
+            }, this));
         },
 
         setApi: function(o) {
             this.api = o;
             this.api.asc_registerCallback('asc_onSheetsChanged', _.bind(this.updateSheetsInfo, this));
+            this.api.asc_registerCallback('asc_onPrintPreviewSheetChanged', _.bind(this.onApiChangePreviewSheet, this));
         },
 
         updateSheetsInfo: function() {
@@ -187,22 +224,28 @@ define([
             panel.btnPresetsLeft.menu.items[panel.btnPresetsLeft.menu.items[0].value == 'frozen' ? 0 : 1].setDisabled(!this.api.asc_getPrintTitlesRange(Asc.c_oAscPrintTitlesRangeType.frozen, true, sheet));
         },
 
-        fillPrintOptions: function(props) {
+        fillPrintOptions: function(props, isDlg) {
-            this.printSettingsDlg.setRange(props.asc_getPrintType());
+            var menu = isDlg ? this.printSettingsDlg : this.printSettings;
-            this.printSettingsDlg.setIgnorePrintArea(!!props.asc_getIgnorePrintArea());
+            menu.setRange(props.asc_getPrintType());
-            this.onChangeRange();
+            menu.setIgnorePrintArea(!!props.asc_getIgnorePrintArea());
+            this.onChangeRange(isDlg);
         },
 
-        onChangeRange: function() {
+        onChangeRange: function(isDlg) {
-            var printtype = this.printSettingsDlg.getRange(),
+            var menu = isDlg ? this.printSettingsDlg : this.printSettings;
-                store = this.printSettingsDlg.cmbSheet.store,
+            var printtype = menu.getRange(),
+                store = menu.cmbSheet.store,
                 item = (printtype !== Asc.c_oAscPrintType.EntireWorkbook) ? store.findWhere({value: this.api.asc_getActiveWorksheetIndex()}) : store.at(0);
             if (item) {
-                this.printSettingsDlg.cmbSheet.setValue(item.get('value'));
+                menu.cmbSheet.setValue(item.get('value'));
-                this.comboSheetsChange(this.printSettingsDlg, this.printSettingsDlg.cmbSheet, item.toJSON());
+                this.comboSheetsChange(menu, menu.cmbSheet, item.toJSON());
+            }
+            menu.cmbSheet.setDisabled(printtype !== Asc.c_oAscPrintType.EntireWorkbook);
+            menu.chIgnorePrintArea.setDisabled(printtype == Asc.c_oAscPrintType.Selection);
+
+            if (!isDlg) {
+                this.updatePreview();
             }
-            this.printSettingsDlg.cmbSheet.setDisabled(printtype !== Asc.c_oAscPrintType.EntireWorkbook);
-            this.printSettingsDlg.chIgnorePrintArea.setDisabled(printtype == Asc.c_oAscPrintType.Selection);
         },
 
         getPageOptions: function(panel) {
@@ -264,11 +307,13 @@ define([
                 this.updateSettings(this.printSettings);
             }
 
-            var item = this.printSettings.cmbSheet.store.findWhere({value: this.api.asc_getActiveWorksheetIndex()});
+            this.fillPrintOptions(this.adjPrintParams, false);
-            if (item) {
+
-                this.printSettings.cmbSheet.setValue(item.get('value'));
+            this._navigationPreview.pageCount = this.api.asc_initPrintPreview('print-preview');
-                this.comboSheetsChange(this.printSettings, this.printSettings.cmbSheet, item.toJSON());
+            this.printSettings.updateCountOfPages(this._navigationPreview.pageCount);
-            }
+            this.printSettings.updateCurrentPage(0);
+
+            this._isPreviewVisible = true;
         },
 
         openPrintSettings: function(type, cmp, format, asUrl) {
@@ -289,7 +334,7 @@ define([
                         this.updateSettings(this.printSettingsDlg);
                         this.printSettingsDlg.cmbSheet.on('selected', _.bind(this.comboSheetsChange, this, this.printSettingsDlg));
                         this.fillComponents(this.printSettingsDlg, true);
-                        this.fillPrintOptions(this.adjPrintParams);
+                        this.fillPrintOptions(this.adjPrintParams, true);
                         this.registerControlEvents(this.printSettingsDlg);
                     },this)
                 }));
@@ -330,10 +375,26 @@ define([
             this.printSettingsDlg = null;
         },
 
-        querySavePrintSettings: function() {
+        querySavePrintSettings: function(print) {
             if ( this.checkMargins(this.printSettings) ) {
                 this.savePageOptions(this.printSettings);
+                this._isPrint = print;
                 this.printSettings.applySettings();
+
+                if (print) {
+                    var printType = this.printSettings.getRange();
+                    this.adjPrintParams.asc_setPrintType(printType);
+                    this.adjPrintParams.asc_setPageOptionsMap(this._changedProps);
+                    this.adjPrintParams.asc_setIgnorePrintArea(this.printSettings.getIgnorePrintArea());
+                    Common.localStorage.setItem("sse-print-settings-range", printType);
+
+                    var opts = new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86);
+                    opts.asc_setAdvancedOptions(this.adjPrintParams);
+                    this.api.asc_Print(opts);
+                    Common.NotificationCenter.trigger('edit:complete', view);
+
+                    this._isPrint = false;
+                }
             }
         },
 
@@ -413,6 +474,7 @@ define([
                                 me.setScaling(panel, me.fitWidth, me.fitHeight, me.fitScale);
                                 if (me._changedProps) {
                                     me._changedProps[panel.cmbSheet.getValue()] = me.getPageOptions(panel);
+                                    me.updatePreview();
                                 }
                             }
                         } else {
@@ -430,6 +492,7 @@ define([
             } else {
                 if (this._changedProps) {
                     this._changedProps[panel.cmbSheet.getValue()] = this.getPageOptions(panel);
+                    this.updatePreview();
                 }
             }
         },
@@ -553,6 +616,97 @@ define([
             }
         },
 
+        onHidePrintMenu: function () {
+            if (this._isPreviewVisible) {
+                this.api.asc_closePrintPreview(this._isPrint);
+                this._isPreviewVisible = false;
+            }
+        },
+
+        onChangePreviewPage: function (next) {
+            var index = this._navigationPreview.currentPage;
+            if (next) {
+                index++;
+                index = Math.min(index, this._navigationPreview.pageCount - 1);
+            } else {
+                index--;
+                index = Math.max(index, 0);
+            }
+            this.api.asc_drawPrintPreview(index);
+
+            this.printSettings.updateCurrentPage(index);
+            this._navigationPreview.currentPage = index;
+        },
+
+        onKeypressPageNumber: function (input, e) {
+            if (e.keyCode === Common.UI.Keys.RETURN) {
+                var box = this.printSettings.$el.find('#print-number-page'),
+                    edit = box.find('input[type=text]'), page = parseInt(edit.val());
+                if (!page || page > this._navigationPreview.pageCount || page < 0) {
+                    edit.select();
+                    return false;
+                }
+
+                box.focus(); // for IE
+
+                this.api.asc_drawPrintPreview(page-1);
+                this.api.asc_enableKeyEvents(true);
+
+                return false;
+            }
+        },
+
+        onKeyupPageNumber: function (input, e) {
+            if (e.keyCode === Common.UI.Keys.ESC) {
+                var box = this.printSettings.$el.find('#print-number-page');
+                box.focus(); // for IE
+                this.api.asc_enableKeyEvents(true);
+                return false;
+            }
+        },
+
+        updatePreview: function () {
+            if (this._isPreviewVisible) {
+                var adjPrintParams = new Asc.asc_CAdjustPrint(),
+                    printType = this.printSettings.getRange();
+                adjPrintParams.asc_setPrintType(printType);
+                adjPrintParams.asc_setPageOptionsMap(this._changedProps);
+                adjPrintParams.asc_setIgnorePrintArea(this.printSettings.getIgnorePrintArea());
+
+                var opts = new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86);
+                opts.asc_setAdvancedOptions(adjPrintParams);
+
+                var pageCount = this.api.asc_updatePrintPreview(opts);
+
+                var newPage;
+                if (this._currentPrintType !== printType) {
+                    newPage = 0;
+                    this._currentPrintType = printType;
+                } else if (this._navigationPreview.currentPage > pageCount - 1) {
+                    newPage = pageCount - 1;
+                } else {
+                    newPage = this._navigationPreview.currentPage;
+                }
+
+                this.api.asc_drawPrintPreview(newPage);
+
+                this._navigationPreview.currentPage = newPage;
+                this.printSettings.updateCurrentPage(newPage);
+                this._navigationPreview.pageCount = pageCount;
+                this.printSettings.updateCountOfPages(pageCount);
+            }
+        },
+
+        onApiChangePreviewSheet: function (index) {
+            var item = this.printSettings.cmbSheet.store.findWhere({value: index});
+            if (item) {
+                this.printSettings.cmbSheet.setValue(item.get('value'));
+                this.comboSheetsChange(this.printSettings, this.printSettings.cmbSheet, item.toJSON());
+                var sheetName = this.api.asc_getWorksheetName(index);
+                this.printSettings.updateActiveSheet(sheetName);
+            }
+        },
+
         warnCheckMargings:      'Margins are incorrect',
         strAllSheets:           'All Sheets',
         textWarning: 'Warning',

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -396,6 +396,8 @@ define([
                     button.on('click', _.bind(me.onEditHeaderClick, me));
                 });
                 toolbar.btnPrintTitles.on('click',                          _.bind(this.onPrintTitlesClick, this));
+                toolbar.chPrintGridlines.on('change',                        _.bind(this.onPrintGridlinesChange, this));
+                toolbar.chPrintHeadings.on('change',                         _.bind(this.onPrintHeadingsChange, this));
                 if (toolbar.btnCondFormat.rendered) {
                     toolbar.btnCondFormat.menu.on('show:before',            _.bind(this.onShowBeforeCondFormat, this, this.toolbar, 'toolbar'));
                 }
@@ -2246,6 +2248,8 @@ define([
             this.onApiPageSize(opt.asc_getWidth(), opt.asc_getHeight());
             this.onApiPageMargins(props.asc_getPageMargins());
             this.onChangeScaleSettings(opt.asc_getFitToWidth(),opt.asc_getFitToHeight(),opt.asc_getScale());
+            this.onApiGridLines(props.asc_getGridLines());
+            this.onApiHeadings(props.asc_getHeadings());
 
             this.api.asc_isLayoutLocked(currentSheet) ? this.onApiLockDocumentProps(currentSheet) : this.onApiUnLockDocumentProps(currentSheet);
             this.toolbar.lockToolbar(SSE.enumLock.printAreaLock, this.api.asc_isPrintAreaLocked(currentSheet), {array: [this.toolbar.btnPrintArea]});
@@ -2256,6 +2260,14 @@ define([
                 this.onApiSheetChanged();
         },
 
+        onApiGridLines: function (checked) {
+            this.toolbar.chPrintGridlines.setValue(checked, true);
+        },
+
+        onApiHeadings: function (checked) {
+            this.toolbar.chPrintHeadings.setValue(checked, true);
+        },
+
         onApiPageSize: function(w, h) {
             if (this._state.pgorient===undefined) return;
 
@@ -4068,6 +4080,16 @@ define([
             }
         },
 
+        onPrintGridlinesChange: function (field, value) {
+            this.api.asc_SetPrintGridlines(value === 'checked');
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onPrintHeadingsChange: function (field, value) {
+            this.api.asc_SetPrintHeadings(value === 'checked');
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
         textEmptyImgUrl     : 'You need to specify image URL.',
         warnMergeLostData   : 'Operation can destroy data in the selected cells.<br>Continue?',
         textWarning         : 'Warning',

apps/spreadsheeteditor/main/app/template/FileMenu.template

@@ -7,7 +7,7 @@
     <li id="fm-btn-download" class="fm-btn"></li>
     <li id="fm-btn-save-copy" class="fm-btn"></li>
     <li id="fm-btn-save-desktop" class="fm-btn"></li>
-    <li id="fm-btn-print" class="fm-btn"></li>
+    <li id="fm-btn-print-with-preview" class="fm-btn"></li>
     <li id="fm-btn-rename" class="fm-btn"></li>
     <li id="fm-btn-protect" class="fm-btn"></li>
     <li class="devider"></li>
@@ -34,4 +34,5 @@
     <div id="panel-settings" class="content-box"></div>
     <div id="panel-help" class="content-box"></div>
     <div id="panel-protect" class="content-box"></div>
+    <div id="panel-print" class="content-box"></div>
 </div>

apps/spreadsheeteditor/main/app/template/Toolbar.template

@@ -162,6 +162,15 @@
                     <span class="btn-slot text x-huge" id="slot-btn-printtitles"></span>
                 </div>
                 <div class="separator long"></div>
+                <div class="group small">
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-chk-print-gridlines"></span>
+                    </div>
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-chk-print-headings"></span>
+                    </div>
+                </div>
+                <div class="separator long"></div>
                 <div class="group">
                     <span class="btn-slot text x-huge" id="slot-img-align"></span>
                     <span class="btn-slot text x-huge" id="slot-img-group"></span>

apps/spreadsheeteditor/main/app/view/FileMenu.js

@@ -140,9 +140,9 @@ define([
                 dataHintOffset: [2, 14]
             });
 
-            this.miPrint = new Common.UI.MenuItem({
+            this.miPrintWithPreview = new Common.UI.MenuItem({
-                el      : $markup.elementById('#fm-btn-print'),
+                el      : $markup.elementById('#fm-btn-print-with-preview'),
-                action  : 'print',
+                action  : 'printpreview',
                 caption : this.btnPrintCaption,
                 canFocused: false,
                 dataHint: 1,
@@ -267,7 +267,7 @@ define([
                 this.miDownload,
                 this.miSaveCopyAs,
                 this.miSaveAs,
-                this.miPrint,
+                this.miPrintWithPreview,
                 this.miRename,
                 this.miProtect,
                 this.miRecent,
@@ -358,7 +358,7 @@ define([
             this.miSaveAs[(this.mode.canDownload && this.mode.isDesktopApp && this.mode.isOffline)?'show':'hide']();
             this.miSave[this.mode.isEdit && Common.UI.LayoutManager.isElementVisible('toolbar-file-save') ?'show':'hide']();
             this.miEdit[!this.mode.isEdit && this.mode.canEdit && this.mode.canRequestEditRights ?'show':'hide']();
-            this.miPrint[this.mode.canPrint?'show':'hide']();
+            this.miPrintWithPreview[this.mode.canPrint?'show':'hide']();
             this.miRename[(this.mode.canRename && !this.mode.isDesktopApp) ?'show':'hide']();
             this.miProtect[this.mode.canProtect ?'show':'hide']();
             separatorVisible = (this.mode.canDownload || this.mode.isEdit && Common.UI.LayoutManager.isElementVisible('toolbar-file-save') || this.mode.canPrint || this.mode.canProtect ||
@@ -444,6 +444,12 @@ define([
                 this.panels['opts'].SetDisabled(this.mode.disableEditing);
                 delete this.mode.disableEditing;
             }
+
+            if (this.mode.canPrint) {
+                var printPanel = SSE.getController('Print').getView('PrintWithPreview');
+                printPanel.menu = this;
+                this.panels['printpreview'] = printPanel.render(this.$el.find('#panel-print'));
+            }
         },
 
         setMode: function(mode, delay) {

apps/spreadsheeteditor/main/app/view/FileMenuPanels.js

@@ -210,9 +210,9 @@ define([
             this.generalSettings.options = {alias:'MainSettingsGeneral'};
             this.generalSettings.render($markup.findById('#panel-settings-general'));
 
-            this.printSettings = SSE.getController('Print').getView('MainSettingsPrint');
+            //this.printSettings = SSE.getController('Print').getView('MainSettingsPrint');
-            this.printSettings.menu = this.menu;
+            //this.printSettings.menu = this.menu;
-            this.printSettings.render($markup.findById('#panel-settings-print'));
+            //this.printSettings.render($markup.findById('#panel-settings-print'));
 
             this.spellcheckSettings = new SSE.Views.FileMenuPanels.MainSpellCheckSettings({menu: this.menu});
             this.spellcheckSettings.render($markup.findById('#panel-settings-spellcheck'));
@@ -221,7 +221,7 @@ define([
                 el: $markup.findById('#id-settings-menu'),
                 store: new Common.UI.DataViewStore([
                     {name: this.txtGeneral, panel: this.generalSettings, iconCls:'toolbar__icon btn-settings', contentTarget: 'panel-settings-general', selected: true},
-                    {name: this.txtPageSettings, panel: this.printSettings, iconCls:'toolbar__icon btn-print', contentTarget: 'panel-settings-print'},
+                    //{name: this.txtPageSettings, panel: this.printSettings, iconCls:'toolbar__icon btn-print', contentTarget: 'panel-settings-print'},
                     {name: this.txtSpellChecking, panel: this.spellcheckSettings, iconCls:'toolbar__icon btn-ic-docspell', contentTarget: 'panel-settings-spellcheck'}
                 ]),
                 itemTemplate: _.template([
@@ -2683,4 +2683,581 @@ define([
 
     }, SSE.Views.FileMenuPanels.ProtectDoc || {}));
 
+    SSE.Views.PrintWithPreview = Common.UI.BaseView.extend(_.extend({
+        el: '#panel-print',
+        menu: undefined,
+
+        template: _.template([
+            '<div style="width:100%; height:100%; position: relative;">',
+                '<div id="id-print-settings" class="no-padding">',
+                    '<div class="print-settings">',
+                        '<div class="flex-settings ps-container oo settings-container">',
+                            '<table style="width: 100%;">',
+                                '<tbody>',
+                                    '<tr><td><label class="header"><%= scope.txtPrintRange %></label></td></tr>',
+                                    '<tr><td class="padding-small"><div id="print-combo-range" style="width: 248px;"></div></td></tr>',
+                                    '<tr><td class="padding-large"><div id="print-chb-ignore" style="width: 248px;"></div></td></tr>',
+                                    '<tr><td><label class="header"><%= scope.txtSettingsOfSheet %></label></td></tr>',
+                                    '<tr><td class="padding-large"><div id="print-combo-sheets" style="width: 248px;"></div></td></tr>',
+                                    '<tr><td><label class="header"><%= scope.txtPageSize %></label></td></tr>',
+                                    '<tr><td class="padding-large"><div id="print-combo-pages" style="width: 248px;"></div></td></tr>',
+                                    '<tr><td><label class="header"><%= scope.txtPageOrientation %></label></td></tr>',
+                                    '<tr><td class="padding-large"><div id="print-combo-orient" style="width: 134px;"></div></td></tr>',
+                                    '<tr><td><label class="header"><%= scope.txtScaling %></label></td></tr>',
+                                    '<tr><td class="padding-large"><div id="print-combo-layout" style="width: 248px;"></div></td></tr>',
+                                    '<tr><td class="padding-small"><label class="header"><%= scope.txtPrintTitles %></label></td></tr>',
+                                    '<tr><td><label><%= scope.txtRepeatRowsAtTop %></label></td></tr>',
+                                    '<tr><td class="padding-small">',
+                                        '<table><tbody><tr>',
+                                            '<td><div id="print-txt-top" style="width: 163px; margin-right: 8px;"></div></td>',
+                                            '<td><div id="print-presets-top" style="width: 77px;"></div></td>',
+                                        '</tr></tbody></table>',
+                                    '</td></tr>',
+                                    '<tr><td><label><%= scope.txtRepeatColumnsAtLeft %></label></td></tr>',
+                                    '<tr><td class="padding-large">',
+                                        '<table><tbody><tr>',
+                                            '<td><div id="print-txt-left" style="width: 163px; margin-right: 8px;"></div></td>',
+                                            '<td><div id="print-presets-left" style="width: 77px;"></div></td>',
+                                        '</tr></tbody></table>',
+                                    '</td></tr>',
+                                    '<tr><td class="padding-small"><label class="header"><%= scope.txtMargins %></label></td></tr>',
+                                    '<tr><td>',
+                                        '<table>',
+                                            '<tbody>',
+                                                '<tr>',
+                                                    '<td><label><%= scope.txtTop %></label></td>',
+                                                    '<td><label><%= scope.txtBottom %></label></td>',
+                                                '</tr>',
+                                                '<tr>',
+                                                    '<td class="padding-small"><div id="print-spin-margin-top" style="margin-right: 8px;"></div></td>',
+                                                    '<td class="padding-small"><div id="print-spin-margin-bottom" style="margin-right: 8px;"></div></td>',
+                                                '</tr>',
+                                                '<tr>',
+                                                    '<td><label><%= scope.txtLeft %></label></td>',
+                                                    '<td><label><%= scope.txtRight %></label></td>',
+                                                '</tr>',
+                                                '<tr>',
+                                                    '<td class="padding-large"><div id="print-spin-margin-left"></div></td>',
+                                                    '<td class="padding-large"><div id="print-spin-margin-right"></div></td>',
+                                                '</tr>',
+                                            '</tbody>',
+                                        '</table>',
+                                    '</td></tr>',
+                                    '<tr><td class="padding-small"><label class="header"><%= scope.txtGridlinesAndHeadings %></label></td></tr>',
+                                    '<tr><td class="padding-small"><div id="print-chb-grid" style="width: 248px;"></div></td></tr>',
+                                    '<tr><td class="padding-large"><div id="print-chb-rows" style="width: 248px;"></div></td></tr>',
+                                    '<tr><td class="padding-large"><label class="link" id="print-header-footer-settings" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.txtHeaderFooterSettings %></label></td></tr>',
+                                    //'<tr><td class="padding-large"><button type="button" class="btn btn-text-default" id="print-apply-all" style="width: 118px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.txtApplyToAllSheets %></button></td></tr>',
+                                    '<tr class="fms-btn-apply"><td>',
+                                        '<div class="footer justify">',
+                                            '<button id="print-btn-print-0" class="btn normal dlg-btn primary" result="print" style="width: 96px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtPrint %></button>',
+                                            '<button id="print-btn-save-0" class="btn normal dlg-btn" result="save" style="width: 96px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtSave %></button>',
+                                        '</div>',
+                                    '</td></tr>',
+                                '</tbody>',
+                            '</table>',
+                        '</div>',
+                        '<div class="fms-flex-apply hidden">',
+                            '<div class="footer justify">',
+                                '<button id="print-btn-print-1" class="btn normal dlg-btn primary" result="print" style="width: 96px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtPrint %></button>',
+                                '<button id="print-btn-save-1" class="btn normal dlg-btn" result="save" style="width: 96px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtSave %></button>',
+                            '</div>',
+                        '</div>',
+                    '</div>',
+                '</div>',
+                '<div id="print-preview-box" style="position: absolute; left: 280px; top: 0; right: 0; bottom: 0;" class="no-padding">',
+                    '<div id="print-preview"></div>',
+                    '<div id="print-navigation">',
+                        '<div id="print-prev-page" style="display: inline-block; margin-right: 4px;"></div>',
+                        '<div id="print-next-page" style="display: inline-block;"></div>',
+                        '<div class="page-number">',
+                            '<label><%= scope.txtPage %></label>',
+                            '<div id="print-number-page"></div>',
+                            '<label id="print-count-page"><%= scope.txtOf %></label>',
+                        '</div>',
+                        '<label id="print-active-sheet"><%= scope.txtSheet %></label>',
+                    '</div>',
+                '</div>',
+            '</div>'
+        ].join('')),
+
+        initialize: function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this,arguments);
+
+            this.menu = options.menu;
+
+            this.spinners = [];
+            this._initSettings = true;
+        },
+
+        render: function(node) {
+            var me = this;
+
+            var $markup = $(this.template({scope: this}));
+
+            this.cmbRange = new Common.UI.ComboBox({
+                el: $markup.findById('#print-combo-range'),
+                menuStyle: 'min-width: 248px;max-height: 280px;',
+                editable: false,
+                takeFocusOnClose: true,
+                cls: 'input-group-nr',
+                data: [
+                    { value: Asc.c_oAscPrintType.ActiveSheets, displayValue: this.txtCurrentSheet },
+                    { value: Asc.c_oAscPrintType.EntireWorkbook, displayValue: this.txtAllSheets },
+                    { value: Asc.c_oAscPrintType.Selection, displayValue: this.txtSelection }
+                ],
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.cmbRange.on('selected', _.bind(this.comboRangeChange, this));
+
+            this.chIgnorePrintArea = new Common.UI.CheckBox({
+                el: $markup.findById('#print-chb-ignore'),
+                labelText: this.txtIgnore,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
+            this.cmbSheet = new Common.UI.ComboBox({
+                el: $markup.findById('#print-combo-sheets'),
+                menuStyle: 'min-width: 248px;max-height: 280px;',
+                editable: false,
+                cls: 'input-group-nr',
+                data: [],
+                takeFocusOnClose: true,
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+
+            this.cmbPaperSize = new Common.UI.ComboBox({
+                el: $markup.findById('#print-combo-pages'),
+                menuStyle: 'max-height: 280px; min-width: 248px;',
+                editable: false,
+                takeFocusOnClose: true,
+                cls: 'input-group-nr',
+                data: [
+                    {value:'215.9|279.4',    displayValue:'US Letter (21,59cm x 27,94cm)', caption: 'US Letter'},
+                    {value:'215.9|355.6',    displayValue:'US Legal (21,59cm x 35,56cm)', caption: 'US Legal'},
+                    {value:'210|297',        displayValue:'A4 (21cm x 29,7cm)', caption: 'A4'},
+                    {value:'148|210',        displayValue:'A5 (14,8cm x 21cm)', caption: 'A5'},
+                    {value:'176|250',        displayValue:'B5 (17,6cm x 25cm)', caption: 'B5'},
+                    {value:'104.8|241.3',    displayValue:'Envelope #10 (10,48cm x 24,13cm)', caption: 'Envelope #10'},
+                    {value:'110|220',        displayValue:'Envelope DL (11cm x 22cm)', caption: 'Envelope DL'},
+                    {value:'279.4|431.8',    displayValue:'Tabloid (27,94cm x 43,18cm)', caption: 'Tabloid'},
+                    {value:'297|420',        displayValue:'A3 (29,7cm x 42cm)', caption: 'A3'},
+                    {value:'304.8|457.1',    displayValue:'Tabloid Oversize (30,48cm x 45,71cm)', caption: 'Tabloid Oversize'},
+                    {value:'196.8|273',      displayValue:'ROC 16K (19,68cm x 27,3cm)', caption: 'ROC 16K'},
+                    {value:'119.9|234.9',    displayValue:'Envelope Choukei 3 (11,99cm x 23,49cm)', caption: 'Envelope Choukei 3'},
+                    {value:'330.2|482.5',    displayValue:'Super B/A3 (33,02cm x 48,25cm)', caption: 'Super B/A3'}
+                ],
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+
+            this.cmbPaperOrientation = new Common.UI.ComboBox({
+                el          : $markup.findById('#print-combo-orient'),
+                menuStyle   : 'min-width: 134px;',
+                editable    : false,
+                takeFocusOnClose: true,
+                cls         : 'input-group-nr',
+                data        : [
+                    { value: Asc.c_oAscPageOrientation.PagePortrait, displayValue: this.txtPortrait },
+                    { value: Asc.c_oAscPageOrientation.PageLandscape, displayValue: this.txtLandscape }
+                ],
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+
+            var itemsTemplate =
+                _.template([
+                    '<% _.each(items, function(item) { %>',
+                    '<li id="<%= item.id %>" data-value="<%= item.value %>" <% if (item.value === "customoptions") { %> class="border-top" style="margin-top: 5px;" <% } %> ><a tabindex="-1" type="menuitem">',
+                    '<%= scope.getDisplayValue(item) %>',
+                    '</a></li>',
+                    '<% }); %>'
+                ].join(''));
+            this.cmbLayout = new Common.UI.ComboBox({
+                el          : $markup.findById('#print-combo-layout'),
+                menuStyle   : 'min-width: 248px;',
+                editable    : false,
+                takeFocusOnClose: true,
+                cls         : 'input-group-nr',
+                data        : [
+                    { value: 0, displayValue: this.txtActualSize },
+                    { value: 1, displayValue: this.txtFitPage },
+                    { value: 2, displayValue: this.txtFitCols },
+                    { value: 3, displayValue: this.txtFitRows },
+                    { value: 'customoptions', displayValue: this.txtCustomOptions }
+                ],
+                itemsTemplate: itemsTemplate,
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+
+            this.txtRangeTop = new Common.UI.InputField({
+                el: $markup.findById('#print-txt-top'),
+                allowBlank: true,
+                validateOnChange: true,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
+            this.btnPresetsTop = new Common.UI.Button({
+                parentEl: $markup.findById('#print-presets-top'),
+                cls: 'btn-text-menu-default',
+                caption: this.txtRepeat,
+                style: 'width: 77px;',
+                menu: true,
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+
+            this.txtRangeLeft = new Common.UI.InputField({
+                el: $markup.findById('#print-txt-left'),
+                allowBlank: true,
+                validateOnChange: true,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
+            this.btnPresetsLeft = new Common.UI.Button({
+                parentEl: $markup.findById('#print-presets-left'),
+                cls: 'btn-text-menu-default',
+                caption: this.txtRepeat,
+                style: 'width: 77px;',
+                menu: true,
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+
+            this.spnMarginTop = new Common.UI.MetricSpinner({
+                el: $markup.findById('#print-spin-margin-top'),
+                step: .1,
+                width: 120,
+                defaultUnit : "cm",
+                value: '0 cm',
+                maxValue: 48.25,
+                minValue: 0,
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.spinners.push(this.spnMarginTop);
+
+            this.spnMarginBottom = new Common.UI.MetricSpinner({
+                el: $markup.findById('#print-spin-margin-bottom'),
+                step: .1,
+                width: 120,
+                defaultUnit : "cm",
+                value: '0 cm',
+                maxValue: 48.25,
+                minValue: 0,
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.spinners.push(this.spnMarginBottom);
+
+            this.spnMarginLeft = new Common.UI.MetricSpinner({
+                el: $markup.findById('#print-spin-margin-left'),
+                step: .1,
+                width: 120,
+                defaultUnit : "cm",
+                value: '0.19 cm',
+                maxValue: 48.25,
+                minValue: 0,
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.spinners.push(this.spnMarginLeft);
+
+            this.spnMarginRight = new Common.UI.MetricSpinner({
+                el: $markup.findById('#print-spin-margin-right'),
+                step: .1,
+                width: 120,
+                defaultUnit : "cm",
+                value: '0.19 cm',
+                maxValue: 48.25,
+                minValue: 0,
+                dataHint: '2',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.spinners.push(this.spnMarginRight);
+
+            this.chPrintGrid = new Common.UI.CheckBox({
+                el: $markup.findById('#print-chb-grid'),
+                labelText: this.txtPrintGrid,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
+            this.chPrintRows = new Common.UI.CheckBox({
+                el: $markup.findById('#print-chb-rows'),
+                labelText: this.txtPrintHeadings,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
+            /*this.btnApplyAll = new Common.UI.Button({
+                el: $markup.findById('#print-apply-all')
+            });*/
+
+            this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
+            this.pnlApply = $markup.find('.fms-flex-apply').addBack().filter('.fms-flex-apply');
+            this.pnlTable = $(this.pnlSettings.find('table')[0]);
+            this.trApply = $markup.find('.fms-btn-apply');
+
+            this.btnsSave = [];
+            this.btnsPrint = [];
+            for (var i=0; i<2; i++) {
+                this.btnsSave.push(new Common.UI.Button({
+                    el: $markup.findById('#print-btn-save-'+i)
+                }));
+                this.btnsPrint.push(new Common.UI.Button({
+                    el: $markup.findById('#print-btn-print-'+i)
+                }));
+            }
+
+            this.btnPrevPage = new Common.UI.Button({
+                parentEl: $markup.findById('#print-prev-page'),
+                cls: 'btn-prev-page',
+                iconCls: 'arrow',
+                dataHint: '2',
+                dataHintDirection: 'top'
+            });
+
+            this.btnNextPage = new Common.UI.Button({
+                parentEl: $markup.findById('#print-next-page'),
+                cls: 'btn-next-page',
+                iconCls: 'arrow',
+                dataHint: '2',
+                dataHintDirection: 'top'
+            });
+
+            this.countOfPages = $markup.findById('#print-count-page');
+
+            this.txtNumberPage = new Common.UI.InputField({
+                el: $markup.findById('#print-number-page'),
+                allowBlank: true,
+                validateOnChange: true,
+                style: 'width: 50px;',
+                maskExp: /[0-9]/,
+                validation: function(value) {
+                    if (/(^[0-9]+$)/.test(value)) {
+                        value = parseInt(value);
+                        if (undefined !== value && value > 0 && value <= me.pageCount)
+                            return true;
+                    }
+
+                    return me.txtPageNumInvalid;
+                },
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
+            this.txtActiveSheet = $markup.findById('#print-active-sheet');
+
+            this.$el = $(node).html($markup);
+
+            this.$el.on('click', '#print-header-footer-settings', _.bind(this.openHeaderSettings, this));
+            this.$headerSettings = $('#print-header-footer-settings');
+
+            if (_.isUndefined(this.scroller)) {
+                this.scroller = new Common.UI.Scroller({
+                    el: this.pnlSettings,
+                    suppressScrollX: true,
+                    alwaysVisibleY: true
+                });
+            }
+
+            Common.NotificationCenter.on({
+                'window:resize': function() {
+                    me.isVisible() && me.updateScroller();
+                }
+            });
+
+            this.updateMetricUnit();
+
+            this.fireEvent('render:after', this);
+
+            return this;
+        },
+
+        show: function() {
+            Common.UI.BaseView.prototype.show.call(this,arguments);
+            if (this._initSettings) {
+                this.updateMetricUnit();
+                this._initSettings = false;
+            }
+            this.updateScroller();
+            this.fireEvent('show', this);
+        },
+
+        updateScroller: function() {
+            if (this.scroller) {
+                Common.UI.Menu.Manager.hideAll();
+                var scrolled = this.$el.height()< this.pnlTable.height() + 25 + this.pnlApply.height();
+                this.pnlApply.toggleClass('hidden', !scrolled);
+                this.trApply.toggleClass('hidden', scrolled);
+                this.pnlSettings.css('overflow', scrolled ? 'hidden' : 'visible');
+                this.scroller.update();
+                this.pnlSettings.toggleClass('bordered', this.scroller.isVisible());
+            }
+        },
+
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
+        setApi: function(api) {
+
+        },
+
+        updateMetricUnit: function() {
+            if (this.spinners) {
+                for (var i=0; i<this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
+                }
+            }
+            var store = this.cmbPaperSize.store;
+            for (var i=0; i<store.length; i++) {
+                var item = store.at(i),
+                    value = item.get('value'),
+                    pagewidth = /^\d{3}\.?\d*/.exec(value),
+                    pageheight = /\d{3}\.?\d*$/.exec(value);
+
+                item.set('displayValue', item.get('caption') + ' (' + parseFloat(Common.Utils.Metric.fnRecalcFromMM(pagewidth).toFixed(2)) + Common.Utils.Metric.getCurrentMetricName() + ' x ' +
+                    parseFloat(Common.Utils.Metric.fnRecalcFromMM(pageheight).toFixed(2)) + Common.Utils.Metric.getCurrentMetricName() + ')');
+            }
+            this.cmbPaperSize.onResetItems();
+        },
+
+        addCustomScale: function (add) {
+            if (add) {
+                this.cmbLayout.setData([
+                    { value: 0, displayValue: this.txtActualSize },
+                    { value: 1, displayValue: this.txtFitPage },
+                    { value: 2, displayValue: this.txtFitCols },
+                    { value: 3, displayValue: this.txtFitRows },
+                    { value: 4, displayValue: this.txtCustom },
+                    { value: 'customoptions', displayValue: this.txtCustomOptions }
+                ]);
+            } else {
+                this.cmbLayout.setData([
+                    { value: 0, displayValue: this.txtActualSize },
+                    { value: 1, displayValue: this.txtFitPage },
+                    { value: 2, displayValue: this.txtFitCols },
+                    { value: 3, displayValue: this.txtFitRows },
+                    { value: 'customoptions', displayValue: this.txtCustomOptions }
+                ]);
+            }
+        },
+
+        applySettings: function() {
+            if (this.menu) {
+                this.menu.fireEvent('settings:apply', [this.menu]);
+            }
+        },
+
+        isVisible: function() {
+            return (this.$el || $(this.el)).is(":visible");
+        },
+
+        setRange: function(value) {
+            this.cmbRange.setValue(value);
+        },
+
+        getRange: function() {
+            return this.cmbRange.getValue();
+        },
+
+        setIgnorePrintArea: function(value) {
+            this.chIgnorePrintArea.setValue(value);
+        },
+
+        getIgnorePrintArea: function() {
+            return (this.chIgnorePrintArea.getValue()=='checked');
+        },
+
+        comboRangeChange: function(combo, record) {
+            this.fireEvent('changerange', this);
+        },
+
+        openHeaderSettings: function() {
+            SSE.getController('Toolbar').onEditHeaderClick();
+        },
+
+        updateCountOfPages: function (count) {
+            this.countOfPages.text(
+                Common.Utils.String.format(this.txtOf, count)
+            );
+            this.pageCount = count;
+        },
+
+        updateActiveSheet: function (name) {
+            this.txtActiveSheet.text(
+                Common.Utils.String.format(this.txtSheet, name)
+            );
+        },
+
+        updateCurrentPage: function (index) {
+            this.txtNumberPage.setValue(index + 1);
+        },
+
+        txtPrint: 'Print',
+        txtSave: 'Save',
+        txtPrintRange: 'Print range',
+        txtCurrentSheet: 'Current sheet',
+        txtAllSheets: 'All sheets',
+        txtSelection: 'Selection',
+        txtSettingsOfSheet: 'Settings of sheet',
+        txtPageSize: 'Page size',
+        txtPageOrientation: 'Page orientation',
+        txtPortrait: 'Portrait',
+        txtLandscape: 'Landscape',
+        txtScaling: 'Scaling',
+        txtActualSize: 'Actual Size',
+        txtFitPage: 'Fit Sheet on One Page',
+        txtFitCols: 'Fit All Columns on One Page',
+        txtFitRows: 'Fit All Rows on One Pag',
+        txtCustom: 'Custom',
+        txtCustomOptions: 'Custom Options',
+        txtPrintTitles: 'Print titles',
+        txtRepeatRowsAtTop: 'Repeat rows at top',
+        txtRepeatColumnsAtLeft: 'Repeat columns at left',
+        txtRepeat: 'Repeat...',
+        txtMargins: 'Margins',
+        txtTop: 'Top',
+        txtBottom: 'Bottom',
+        txtLeft: 'Left',
+        txtRight: 'Right',
+        txtGridlinesAndHeadings: 'Gridlines and headings',
+        txtPrintGrid: 'Print gridlines',
+        txtPrintHeadings: 'Print row and columns headings',
+        txtHeaderFooterSettings: 'Header/footer settings',
+        txtApplyToAllSheets: 'Apply to all sheets',
+        txtIgnore: 'Ignore print area',
+        txtPage: 'Page',
+        txtOf: 'of {0}',
+        txtSheet: 'Sheet: {0}',
+        txtPageNumInvalid: 'Page number invalid'
+    }, SSE.Views.FileMenuPanels.PrintWithPreview || {}));
+
 });

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -1580,6 +1580,22 @@ define([
                     dataHintOffset: 'small'
                 });
 
+                me.chPrintGridlines = new Common.UI.CheckBox({
+                    labelText: this.textPrintGridlines,
+                    lock: [_set.selRange, _set.selRangeEdit, _set.lostConnect, _set.coAuth, _set.coAuthText, _set["Objects"]],
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+
+                me.chPrintHeadings = new Common.UI.CheckBox({
+                    labelText: this.textPrintHeadings,
+                    lock: [_set.selRange, _set.selRangeEdit, _set.lostConnect, _set.coAuth, _set.coAuthText, _set["Objects"]],
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+
                 me.btnImgAlign = new Common.UI.Button({
                     cls: 'btn-toolbar x-huge icon-top',
                     iconCls: 'toolbar__icon btn-img-align',
@@ -1647,7 +1663,8 @@ define([
                     me.btnInsertChart, me.btnColorSchemas, me.btnInsertSparkline,
                     me.btnCopy, me.btnPaste, me.listStyles, me.btnPrint,
                     /*me.btnSave,*/ me.btnClearStyle, me.btnCopyStyle,
-                    me.btnPageMargins, me.btnPageSize, me.btnPageOrient, me.btnPrintArea, me.btnPrintTitles, me.btnImgAlign, me.btnImgBackward, me.btnImgForward, me.btnImgGroup, me.btnScale
+                    me.btnPageMargins, me.btnPageSize, me.btnPageOrient, me.btnPrintArea, me.btnPrintTitles, me.btnImgAlign, me.btnImgBackward, me.btnImgForward, me.btnImgGroup, me.btnScale,
+                    me.chPrintGridlines, me.chPrintHeadings
                 ];
 
                 _.each(me.lockControls.concat([me.btnSave]), function(cmp) {
@@ -1853,7 +1870,9 @@ define([
             _injectComponent('#slot-btn-pagemargins',   this.btnPageMargins);
             _injectComponent('#slot-btn-pagesize',      this.btnPageSize);
             _injectComponent('#slot-btn-printarea',      this.btnPrintArea);
-            _injectComponent('#slot-btn-printtitles',    this.btnPrintTitles);
+            _injectComponent('#slot-btn-printtitles',   this.btnPrintTitles);
+            _injectComponent('#slot-chk-print-gridlines', this.chPrintGridlines);
+            _injectComponent('#slot-chk-print-headings',  this.chPrintHeadings);
             _injectComponent('#slot-img-align',         this.btnImgAlign);
             _injectComponent('#slot-img-group',         this.btnImgGroup);
             _injectComponent('#slot-img-movefrwd',      this.btnImgForward);
@@ -2863,6 +2882,8 @@ define([
         textItems: 'Items',
         tipInsertSpark: 'Insert sparkline',
         capInsertSpark: 'Sparklines',
-        txtScheme22: 'New Office'
+        txtScheme22: 'New Office',
+        textPrintGridlines: 'Print gridlines',
+        textPrintHeadings: 'Print headings'
     }, SSE.Views.Toolbar || {}));
 });

apps/spreadsheeteditor/main/resources/less/leftmenu.less

@@ -521,6 +521,124 @@
                 }
             }
         }
+
+        #panel-print {
+            padding: 0;
+            #id-print-settings {
+                position: absolute;
+                width:280px;
+                top: 0;
+                bottom: 0;
+            }
+            .print-settings {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
+                border-right: @scaled-one-px-value solid @border-toolbar;
+                label.header {
+                    font-weight: 700;
+                }
+                .footer {
+                    .btn.primary {
+                        margin-right: 8px;
+                    }
+                }
+                .settings-container {
+                    width: 100%;
+                    height: 100%;
+                    overflow: hidden;
+                    padding: 12px 16px;
+                    .padding-small {
+                        padding-bottom: 8px;
+                    }
+                    .padding-large {
+                        padding-bottom: 16px;
+                    }
+
+                    #print-apply-all {
+                        margin-top: 5px;
+                    }
+                    .link {
+                        margin-top: 9px;
+                    }
+                    .footer {
+                        margin-top: 24px;
+                    }
+                }
+                .fms-flex-apply {
+                    padding-left: 16px;
+                    .footer {
+                        .btn {
+                            margin-top: 16px;
+                            margin-bottom: 16px;
+                        }
+                    }
+                }
+            }
+            #print-navigation {
+                height: 50px;
+                padding-left: 20px;
+                padding-top: 10px;
+                display: flex;
+                .btn-prev-page, .btn-next-page {
+                    background-color: transparent;
+                    padding: 0;
+                    height: 20px;
+                    width: 20px;
+                    i.arrow {
+                        display: inline-block;
+                        width: 10px;
+                        height: 10px;
+
+                        border: solid @scaled-one-px-value-ie @icon-normal-ie;
+                        border: solid @scaled-one-px-value @icon-normal;
+                        border-bottom: none;
+                        border-right: none;
+                    }
+                    &.disabled {
+                        opacity: @component-disabled-opacity;
+                    }
+
+                    &:hover:not(:disabled):not(.disabled) {
+                        background-color: @highlight-button-hover-ie;
+                        background-color: @highlight-button-hover;
+                    }
+                }
+                .btn-prev-page {
+                    i {
+                        transform: rotate(-45deg) translate(-1px, 3px);
+                    }
+                }
+                .btn-next-page {
+                    i {
+                        transform: rotate(135deg) translate(4px, 0px);
+                    }
+                }
+                .page-number {
+                    display: flex;
+                    align-items: center;
+                    height: 20px;
+                    margin-left: 10px;
+                    label {
+                        font-weight: bold;
+                    }
+                    #print-count-page, #print-number-page {
+                        margin-left: 4px;
+                    }
+                }
+                #print-active-sheet {
+                    margin-left: 12px;
+                    height: 20px;
+                    line-height: 20px;
+                }
+            }
+            #print-preview {
+                height: calc(100% - 50px);
+            }
+        }
     }
 }