SAPUI5: PDF Scrolling on iPad
Hi all,
just wanted to share results of SAPUI5 digging evening.
Its all started by the reading of question on sdn PDF Viewer for SAPUI5 Application
The issue was, that embedded PDF-File is not able to be scrolled on ipad.
After first investigation it was clear, that scrolling of iview is a common issue on ios devices. So, the challenge was to find a workaround.
For test application I decided to use a SplitApp from sap.m library.
Here is a draft design of the application.
I decided not to use MVC just to reduce number of files for this example.
So the structure of the project just looks like following
Actually only 2 files needed: index.html and pdf file to display.
Here is a source code of index html with explanation.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
function setPDFHeight(){
$("#pdfObject")[0].height = $("#pdfObject")[0].offsetHeight;
}
var oApp = new sap.m.SplitApp( "splitApp" ); // Split
var oMaster = new sap.m.List( "mList" );
oApp.addMasterPage(oMaster);
var oPage = new sap.m.Page({
id : "mPage",
showHeader : false,
enableScrolling : false, // !!!! Important !!!!
showFooter : false
});
var oHTML = new sap.ui.core.HTML("iFRM");
oHTML.setContent("<div align=\"center\" style=\"width: 100%; height:100%; overflow: auto !important; -webkit-overflow-scrolling: touch !important;\"><object id=\"pdfObject\" width=\"100%\" height=\"1000000000000\" align=\"center\" data=\"pdf/HANADevGuide.pdf\" type=\"application/pdf\" onload=\"setPDFHeight()\">You have no plugin installed</object></div>");
oPage.addContent(oHTML);
oApp.addDetailPage(oPage);
oApp.placeAt("content")
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>What I got from googling is that scrollable content must be wrapped into div with following style properties (I defined these properties as !important):
overflow: auto;
-webkit-overflow-scrolling: touch;
Another fix is to define a detail page as non scrollable (enableScrolling : false)
Third fix was to use not an iframe (I could not get it functional) but the object. So it was necessary to auto-resize height of the object (object height must be taken from PDF-height).
for that purpose I have used a function setPDFHeight(), which was assigned to onload event of the object.
And the last but not least fix was an initial height of PDF-Object. To get the correct value of offsetHeight attribute the initial height must be more, than height of PDF document. I just set it to 1000000000000.
As a result I got scrollable PDF document on iPad.
iPad2:
iPadAir:
P.S.: English language is not my native language, and any person is not insured from mistakes and typing errors. If you have found an error in the text, please let me know.
P.P.S.: If you have some ideas, how to correct/improve the code – please don’t hesitate to leave a comment.
Thanks for the blog. PDF is even more of a hassle on Android. I've used iScroll as a workaround for scrolling and for showing pdf's on Android we have used pdf.js
BR
Njål
Hi Njål, thanks for reply. Hope SAP will include PDF scrolling as a part of standard library in the future releases.
Just use Neptune 😉 (Yeah I work for the company)
Cool stuff.
Thanks
test this solution on your android/iPad/WP 🙂
http://ides.neptune-software.com:8000/neptune/pdfview.html
Checked, looks great.
Is it possible to show a continious pdf?
I'll test it with a continuous pdf (think there should be no issues) Implemented it today so will improve the solution. Major advantage is that you do not need a PDF viewer as all is handled by HTML5 and js.
Here is a link to a cont. pdf with this solution
yeah! Works great!