<mvc:View controllerName="canvasZoomInZoomOut_Canvas.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<Panel width="auto" class="sapUiResponsiveMargin" accessibleRole="Region" id="canvasElementPanel">
<Toolbar class="sapUiTinyMarginBottom" height="8rem">
<ToolbarSpacer/>
<Button icon="sap-icon://add" press="onZoomIn" type="Emphasized"/>
<Button icon="sap-icon://less" press="onZoomOut" type="Emphasized"/>
</Toolbar>
<content></content>
</Panel>
</content>
</Page>
</pages>
</App>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"canvasZoomInZoomOut_Canvas/control/pdf"
], function(Controller) {
"use strict";
return Controller.extend("canvasZoomInZoomOut_Canvas.controller.View1", {
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
"canvasZoomInZoomOut_Canvas/control/pdf"
], function(Controller) {
"use strict";
var size, pageNumber, decodedPdfContent;
return Controller.extend("canvasZoomInZoomOut_Canvas.controller.View1", {
onInit: function() {
var that = this;
pageNumber = 1;
var oModel = that.getOwnerComponent().getModel();
var filterArray = [];
var userName = new sap.ui.model.Filter("Uname", "EQ", "TestUser");
var rosterNo = new sap.ui.model.Filter("RosterNo", "EQ", "12345678");
var key = new sap.ui.model.Filter("Key", "EQ", "O");
filterArray.push(userName);
filterArray.push(rosterNo);
filterArray.push(key);
oModel.read("/RostEmpViewSet", {
filters: filterArray,
success: function(oData) {
if (oData.results.length > 0) {
var sValue = oData.results[0].Base64Value;
var base64EncodedPDF = sValue;
//============ Decoding PDF content ====================//
decodedPdfContent = atob(base64EncodedPDF);
var byteArray = new Uint8Array(decodedPdfContent.length);
for (var i = 0; i < decodedPdfContent.length; i++) {
byteArray[i] = decodedPdfContent.charCodeAt(i);
}
//============ Creating Canvas element ====================//
var html1 = new sap.ui.core.HTML(that.createId("html1"), {
content: "<canvas id='the-canvas' ></canvas>"
});
that.byId("canvasElementPanel").addContent(html1);
//============ Detecting login device ====================//
var oDesktopDevice = sap.ui.Device.system.desktop;
var phone = sap.ui.Device.system.phone;
var scale;
if (oDesktopDevice === true) {
scale = 1.5;
} else if (phone === true) {
scale = 0.4;
} else {
scale = 0.87;
}
that.pdfScale = scale;
that.pdfDataView(pageNumber, scale, decodedPdfContent);
}
},
error: function(err) {
alert(err);
}
});
},
pdfDataView: function(pageNumber, scale, decodedPdfContent) {
var that = this;
var pdfjsLib = window['pdfjs-dist/build/pdf'];
//============ The workerSrc property shall be specified ====================//
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
//============ Using DocumentInitParameters object to load binary data ====================//
var loadingTask = pdfjsLib.getDocument({
data: decodedPdfContent
});
loadingTask.promise.then(function(pdf) {
size = pdf.numPages;
that.pdf = pdf;
//============ Fetching first page ====================//
that.renderPage(scale, pageNumber, pdf, that);
}, function(reason) {
// PDF loading error
});
},
renderPage: function(scale, pageNumber, pdf, contxt) {
var that = contxt;
pdf.getPage(pageNumber).then(function(page) {
var viewport = page.getViewport({
scale: scale
});
//============ Prepare canvas using PDF page dimensions ====================//
var canvas = document.getElementById('the-canvas');
if (canvas !== null) {
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//============ Render PDF page into canvas context ====================//
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
});
}
});
}
});
});
onZoomIn: function () {
if (sap.ui.Device.system.phone) {
this.pdfScale = this.pdfScale + 0.15;
this.renderPage(this.pdfScale, 1, this.pdf, this);
} else {
this.pdfScale = this.pdfScale + 0.25;
this.renderPage(this.pdfScale, 1, this.pdf, this);
}
},
onZoomOut: function () {
if (sap.ui.Device.system.phone) {
if (this.pdfScale < 0.3) {
sap.m.MessageToast.show("Zoom out is not possible");
} else {
this.pdfScale = this.pdfScale - 0.15;
this.renderPage(this.pdfScale, 1, this.pdf, this);
}
} else {
if (this.pdfScale < 0.9) {
sap.m.MessageToast.show("Zoom out is not possible");
} else {
this.pdfScale = this.pdfScale - 0.25;
this.renderPage(this.pdfScale, 1, this.pdf, this);
}
}
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 |