<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page</title>
<script src='https://sapui5.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-bindingSyntax='complex' data-sap-ui-resourceroots='{"sap.m.sample": "./"}'
data-sap-ui-frameOptions="trusted">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
showLogout: false,
appWidthLimited: false,
app: new sap.ui.core.ComponentContainer({
name: "sap.m.sample",
height: "100%",
width: "100%",
settings: {
id: "sample"
},
propagateModel: true
})
}).placeAt("content");
});
</script>
</head>
<body id="content" style="margin: 0" class="sapUiBody">
</body>
</html>
// Code goes here
/* Styles go here */
In reponse to question
"SAP UI5 Gantt Chart export to PDF or print all chart"
https://stackoverflow.com/q/53817121/7626277
sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel"],
function(UIComponent,JSONModel) {
"use strict";
return UIComponent.extend("sap.m.sample.Component", {
metadata: {
manifest: "json"
},
init: function() {
var oMasterModel = new JSONModel("data.json");
this.setModel(oMasterModel);
UIComponent.prototype.init.apply(this, arguments);
}
});
}, true);
{"ProductCollection": [{
"titleId": 0,
"Name": "Olayinka Otuniyi",
"ProductId": "001",
"chartValue": 75,
"ProductPicUrl": "sap-icon://competitor"
}, {
"titleId": 1,
"Name": "Maria Anders",
"ProductId": "002",
"chartValue": 75,
"ProductPicUrl": "sap-icon://badge"
}, {
"titleId": 2,
"Name": "Ana Trujillo",
"ProductId": "003",
"chartValue": 75,
"ProductPicUrl": "sap-icon://broken-link"
}, {
"titleId": 3,
"Name": "Thomas Hardy",
"ProductId": "004",
"chartValue": 75,
"ProductPicUrl": "sap-icon://create"
}, {
"titleId": 4,
"Name": "Christina Berglund",
"ProductId": "005",
"chartValue": 75,
"ProductPicUrl": "sap-icon://pending"
}, {
"titleId": 5,
"Name": "Hanna Moos",
"ProductId": "006",
"chartValue": 75,
"ProductPicUrl": "sap-icon://decision"
},{
"titleId": 6,
"Name": "MartÃn Sommer",
"ProductId": "007",
"chartValue": 75,
"ProductPicUrl": "sap-icon://process"
}, {
"titleId": 7,
"Name": "Laurence Lebihans",
"ProductId": "008",
"chartValue": 75,
"ProductPicUrl": "sap-icon://accept"
}, {
"titleId": 8,
"Name": "Elizabeth Lincoln",
"ProductId": "009",
"chartValue": 75,
"ProductPicUrl": "sap-icon://alert"
}]}
sap.ui.define(["sap/m/StandardListItem", "sap/ui/model/json/JSONModel"], function(StandardListItem, JSONModel) {
"use strict";
return sap.ui.controller("sap.m.sample.Main", {
// onInit: function() {
// },
onAfterRendering: function() {
var oTemplate = new StandardListItem({
title: "{products>Name}",
description: "{products>ProductId}",
icon: "{products>ProductPicUrl}",
iconDensityAware: false,
iconInset: false,
type: "Active"
});
oTemplate.attachPress(this.onSelectionChange, this);
this.getView().byId("idList").bindItems({
path: "/ProductCollection",
template: oTemplate,
model: "products"
});
},
onSearch: function() {
console.log("Searching");
},
onSelectionChange: function() {
console.log("changing Selection");
},
pressButton: function() {
var source = $("#UIComp_0")[0];
var doc = new jsPDF('p', 'mm');
html2canvas(source /*document.body*/ , {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/jpg");
doc.addImage(img, 'JPEG', 50, 50);
doc.save("Chart.pdf");
}
});
}
});
});
sap.ui.define(["sap/m/Page", "sap/m/List", "sap/m/Toolbar", "sap/m/SearchField", "sap/m/Label", "sap/m/Text",
"sap/viz/ui5/controls/VizFrame",
"sap/viz/ui5/data/FlattenedDataset",
"sap/viz/ui5/controls/common/feeds/FeedItem",
"sap/ui/layout/VerticalLayout"
], function(Page, List,
Toolbar,
SearchField, Label, Text, Vizframe, FlattenedDataset, FeedItem, VerticalLayout) {
"use strict";
return sap.ui.jsview("sap.m.sample.Main", {
getControllerName: function() {
return "sap.m.sample.Main";
},
createContent: function(oController) {
var oToolbar = new Toolbar({
visible: true,
content: [
new SearchField({
liveChange: function() {
oController.onSearch();
},
width: "100%"
})
]
});
var oInfoToolbar = new Toolbar({
content: new Toolbar(this.createId("idInfoToolbar"), {
visible: true,
content: new Text({
text: "Label Text"
})
})
});
var oList = new List(this.createId("idList"), {
mode: "MultiSelect",
includeItemInSelection: true,
infoToolbar: oInfoToolbar
});
var oPage = new Page(this.createId("oPageId"), {
title: "{i18n>appTitle}",
showHeader: true,
showSubHeader: true,
headerContent: oToolbar,
content: [
new sap.m.Button("printButton", {
text: "Generate PDF",
press: oController.pressButton
}),
new VerticalLayout("chartContainer", {
width: "100%",
content: [
new Vizframe(this.createId("printChart"), {
uiConfig: {
applicationSet: "fiori"
},
vizType: "column",
width: "20%",
height: "230px",
vizProperties: {
legend: {
visible: true
},
title: {
visible: false,
text: "PDF Chart"
},
valueAxis: {
title: {
visible: true,
text: "%"
}
},
categoryAxis: {
title: {
visible: true,
text: "Chart Print PDF"
}
}
}
})
]
}),oList
]
});
var oDatasetChart = new FlattenedDataset({
data: {
path: "/ProductCollection"
},
measures: {
name: "chartValue",
value: "{chartValue}"
}
}),
oFeedValueAxisChart = new FeedItem({
uid: "valueAxis",
type: "Measure",
values: ["chartValue"]
});
this.byId("printChart").setDataset(oDatasetChart).addFeed(oFeedValueAxisChart);
var app = new sap.m.App();
app.addPage(oPage);
app.placeAt("content");
return app;
}
});
});
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sample",
"type": "application",
"i18n": "i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"products": {
"uri": "data.json",
"type": "JSON",
"settings": {
"odataVersion": "2.0",
"localUri": "sap.m.sample.data.json",
"annotations": []
}
}
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": ["sap_bluecrystal"],
"fullWidth": false
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": {
"viewName": "sap.m.sample.Main",
"type": "JS"
},
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.m.sample.i18n"
}
},
"products": {
"type": "sap.ui.model.json.JSONModel",
"settings": {
"defaultOperationMode": "Server",
"defaultBindingMode": "TwoWay",
"defaultCountMode": "None",
"useBatch": false
},
"dataSource": "products"
}
},
"resources": {
"css": [{
"uri": "style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewPath": "sap.m.sample",
"controlId": "app",
"viewType": "JS",
"async": true,
"bypassed": {
"target": ["Main", "notFound"]
}
},
"routes": [{
"name": "Main",
"pattern": "",
"target": ["Main"]
}],
"targets": {
"Main": {
"viewName": "Main",
"controlAggregation": "pages",
"viewLevel": "1"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
}
}
}
appDescription = Example App
appTitle = Print PDF Example
appTitle = Print PDF Example
appDescription = Example App
appTitle = Print PDF Example