a week ago
Hi all,
i want to create an app, where visitors can do a "self" check-in.
Therefore they have to read a pdf-file for safety instructions.
The Browser runs on Kiosk mode, so the modal PDF-Preview is not that great for my use case.
Thats why I've created a small http server which hosts the pdf-file localy to display it.
In my SAP Build App I tried to display the pdf via the Inline Frame (iFrame), but Chrome is everytime saying, that it is blocked by Chrome:
"This site was blocked by Chrome"
I found out, that this has to do with the sandbox attribute of the HTML iFrame.
It sets the sandbox attribute everytime, as well when I'm not setting anything:
It also not works, when I am adding every value:
allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-storage-access-by-user-activation Experimental allow-top-navigation allow-top-navigation-by-user-activation allow-top-navigation-to-custom-protocols
When I remove the sandbox attribute by myself in the developer console, and right clicking "reload frame", it is showing my pdf like it should 🙂
Is there a way to remove the attribute? Or a workaround for that?
Thanks,
Vincent
Friday
I found a solution for my use-case 🙂
For everybody who is interessted, I did it by using an iframe and using pdf.js to render the pdf by myself: https://github.com/mozilla/pdf.js
Configuration in SAP Build Apps:
Use component inline frame:
My html file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<html>
<body>
<div >
<p style="max-width: fit-content; margin: auto;"></p>
<canvas id="pdfCanvas" style="border-style: solid; border-width: 2px;"></canvas>
<div style="max-width: fit-content; margin: auto; margin-top: 20px;">
<button id="btnPrevious" style="width: 100px;">Previous</button>
<button id="btnNext" style="width: 100px;">Next</button>
</div>
</div>
<script>
var pdf;
var pageNr = 1;
var maxPages = 0;
var url= "<yourURL>/example.pdf";
window.addEventListener('DOMContentLoaded', init);
function init() {
document.getElementById('pdfCanvas').addEventListener('click', nextPage);
document.getElementById('btnNext').addEventListener('click', nextPage);
document.getElementById('btnPrevious').addEventListener('click', previousPage);
}
function nextPage() {
if(pageNr >= maxPages) {
throw new Error(`Reached end of pdf file (Site ${pageNr}/${maxPages})`);
}
else {
pageNr++;
renderPage(pdf);
}
}
function previousPage() {
if (pageNr == 1) {
throw new Error(`Reached beginning of pdf file`);
}
else {
pageNr--;
renderPage(pdf);
}
}
pdfjsLib.getDocument(url).promise.then((pdf) => {
this.pdf = pdf;
maxPages = pdf.numPages;
console.log(maxPages);
renderPage(pdf)
});
function renderPage(pdf) {
pdf.getPage(pageNr).then((page) => {
var scale = 1;
var viewport = page.getViewport({ scale: scale });
var canvas = document.getElementById('pdfCanvas');
var context = canvas.getContext('2d');
canvas.width = viewport.width;
canvas.height = viewport.height;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
}).catch((err) => {
console.log('ERROR: ' + err);
});
}
</script>
</body>
</html>
The width/height can changed set by using the scale value.
It is also possible to create a pdf from base64. For that have a look here: https://mozilla.github.io/pdf.js/examples/#:~:text=Hello%20World%20using%20base64%20encoded%20PDF