SAP provide us to integrate sapui5 application with third party. At many time we got such requirement where client want to download data in PDF or Excel format for records, some proof or some other reasons. So here we will discuss about how we can download data in PDF format.
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sap/pdf/model/models"
], function(UIComponent, Device, models) {
"use strict";
return UIComponent.extend("sap.pdf.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function() {
var url ='/sap/opu/odata/sap/ZDEMO_DATA_SRV/';
var oModel = new sap.ui.model.odata.ODataModel(url, true);
sap.ui.getCore().setModel(oModel);
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// set the device model
this.setModel(models.createDeviceModel(), "device");
}
});
});
<mvc:View controllerName="sap.pdf.controller.main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page title="PDF Download">
<content>
<Table id="idPDFTable" items="{/DemoSet}">
<headerToolbar>
<Toolbar>
<Title level="H2" text="PDF Table"/>
<ToolbarSpacer></ToolbarSpacer>
<Button icon="sap-icon://download" press="onDataExportPDF" />
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="ID"/>
</Column>
<Column>
<Text text="Frist Name"/>
</Column>
<Column>
<Text text="Last Name"/>
</Column>
<Column>
<Text text="Phone No."/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Id}"/>
<Text text="{Fname}"/>
<Text text="{Lname}"/>
<Text text="{Phoneno}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("sap.pdf.controller.main", {
onInit: function () {
// set explored app's demo model on this sample
this.getView().setModel(sap.ui.getCore().getModel());
},
onDataExportPDF:function(oEvent){
var fnSuccess = function(oData, oResponse) {
var columns = ["ID","First Name","Last Name","Phone No."];
var data = [];
for(var i=0;i<oData.results.length;i++)
{
data[i]=[oData.results[i].Id,oData.results[i].Fname,oData.results[i].Lname,oData.results[i].Phoneno];
}
var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, data);
doc.save("DemoData.pdf");
};
var fnFail = function() {
};
sap.ui.getCore().getModel().read('/DemoSet',
null, null, true, fnSuccess, fnFail);
}
});
});
Please find screen shots of application.
On press on that download icon.
PDF output:-
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
10 | |
7 | |
6 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |