UI5 Print Demo

<!DOCTYPE html>
<html>

  <head>
    <title>UI5 Print Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8" />
    <script type="text/javascript" 
      id="sap-ui-bootstrap" 
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
      data-sap-ui-theme="sap_bluecrystal" 
      data-sap-ui-libs="sap.m" 
      data-sap-ui-compatVersion="edge"
      data-sap-ui-preload="async"
      data-sap-ui-resourceroots='{ "ui" : "./ui" }'
      data-sap-ui-rootcomponent="ui" 
      data-sap-ui-xx-rootcomponentnode="root">
    </script>
  </head>

  <body class="sapUiBody" id="root" role="application"></body>
</html>

/* Styles go here */

/* PRINT STYLES */
@media print { 
    /* usage of !important hard overwrites, because UI5 uses inline style directives (style="width:990px")  */
    
    /* define print page default settings */
    @page {
        size: portrait;
        margin: 1.5cm 1cm;
    }
    
    /* scale content to fit print page */
    html, body {
        width: 100% !important;
        height: auto !important;
    }
    
    /* reset body */
    body {
        margin: 0;
        padding: 0;
        float: none; 
        color: #000;
    }
    
    /* helper class to allow selective hiding elements from printing (ex print button)  */
    .uoNoPrint {
        display: none;
    }    
    
    /* fix overflow scrolling */
    * {
        overflow-x: visible !important; 
        overflow-y: visible !important;
    }
    
    /* auto expand collapsed panel contents */
    .sapMPanelExpandablePart {
        display: block !important;
    }
    
    /* disable panel content border */
    .sapMPanelContent {
        border: 0 !important;
    }
    
    /* reset flexed textareas height */ 
    .sapMTextArea>.sapMTextAreaInner {
        height: auto !important;
    }
    
    /* custom css prototypes for addtional used containers */
}

# Demo

Hello World App

jQuery.sap.declare("ui.Component");

sap.ui.core.UIComponent.extend("ui.Component", {
	
	metadata : {
		rootView : "ui.App",
		name : "Section Print",
    version : "1.0",
		includes : [
      "../style.css"
		],
    dependencies : {
        libs : ["sap.m"]
    }
	}

});

<mvc:View controllerName="ui.App" displayBlock="true"
  xmlns="sap.m"
  xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
  xmlns:mvc="sap.ui.core.mvc">
  <App>
    <Page 
      id="page" 
      title="UI5 Print Demo"
      class="sapUiContentPadding">
      <Panel
        headerText="Panel (FlexBox SpaceBetween)"
        expandable="true"
        expanded="false">
        <HBox justifyContent="SpaceBetween">
          <Text text="Flex Item 1" />
          <Text text="Flex Item 2" />  
        </HBox>
      </Panel>
      <List headerText="List" >
        <GroupHeaderListItem
          title="Group Header List Item" />
        <StandardListItem 
          title="List item 1" 
          description="Description 1"
          icon="http://4.bp.blogspot.com/-y_GiBxFhXL0/VDJHvXxuF7I/AAAAAAAAA0g/GVlktggj364/s1600/OpenUI5%2BDeveloper%2BBlog%2BHeader.png"
          iconDensityAware="false" />
      </List>
      <Table id="table">
        <headerToolbar>
          <Toolbar>
            <Text text="Responsive Table" />
          </Toolbar>
        </headerToolbar>
        <columns>
          <Column
            width="12em">
            <Text text="Title" />
          </Column>
          <Column>
            <Text text="Description" />
          </Column>
        </columns>
        <items>
          <ColumnListItem>
            <Text text="Cell 1,1" />
            <Text text="Cell 1,2" />
          </ColumnListItem>
        </items>
      </Table>      
      <footer>
        <Toolbar>
          <ToolbarSpacer />
          <Button
            press="onPrint"
            text="Print"
            icon="sap-icon://print"
            type="Emphasized" />
          <Button
            press="onPrint"
            text="Print Table"
            data:targetId="table"
            icon="sap-icon://print"/>
        </Toolbar>
      </footer>
    </Page>
  </App>
</mvc:View>

(function() {
	'use strict';

  sap.ui.controller("ui.App", {
    
    onPrint : function(oEvent) {
        var oTarget = this.getView(),
            sTargetId = oEvent.getSource().data("targetId");
            
        if (sTargetId) {
            oTarget = oTarget.byId(sTargetId);
        }
        
        if (oTarget) {
            var $domTarget = oTarget.$()[0],
                sTargetContent = $domTarget.innerHTML,
                sOriginalContent = document.body.innerHTML;
                
            document.body.innerHTML = sTargetContent;
            window.print();
            document.body.innerHTML = sOriginalContent;
        } else {
            jQuery.sap.log.error("onPrint needs a valid target container [view|data:targetId=\"SID\"]");
        }
    }
    
  });
  
})();