'show pdf file inside android app from server url without give the permission download that file
show PDF file inside the android app from the server URL without give permission to download that file. how it can do in the android app. I have tried using web_view but it allows us to download it. I won't open that file in the activity. but only display that file not allow to download it.
Solution 1:[1]
Hope this helps you, it will only allow users to view the PDF not download it. You can add this inside your webview and pass the PDF inside it. Drop in comments if you need more assistance
body {
margin: 0;
font-family: sans-serif;
font-size: 0.9rem;
}
#app {
display: flex;
flex-direction: column;
height: 100vh;
}
#toolbar {
display: flex;
align-items: center;
background-color: #555;
color: #fff;
padding: 0.5em;
}
#toolbar button,
#page-mode input {
color: currentColor;
background-color: transparent;
font: inherit;
border: 1px solid currentColor;
border-radius: 3px;
padding: 0.25em 0.5em;
}
#toolbar button:hover,
#toolbar button:focus,
#page-mode input:hover,
#page-mode input:focus {
color: lightGreen;
}
#page-mode {
display: flex;
align-items: center;
padding: 0.25em 0.5em;
}
#viewport-container {
flex: 1;
background: #eee;
overflow: auto;
}
#viewport {
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
}
#viewport > div {
text-align: center;
max-width: 100%;
}
#viewport canvas {
width: 100%;
box-shadow: 0 2px 5px gray;
}
<!DOCTYPE html>
<html>
<head>
<title>PDF Viewer PDF.js</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="app">
<div role="toolbar" id="toolbar">
<div id="pager">
<button data-pager="prev">prev</button>
<button data-pager="next">next</button>
</div>
<div id="page-mode">
<label>Page Mode <input type="number" value="1" min="1"/></label>
</div>
</div>
<div id="viewport-container"><div role="main" id="viewport"></div></div>
</div>
<script src="https://unpkg.com/[email protected]/build/pdf.min.js"></script>
<script>
(function() {
let currentPageIndex = 0;
let pageMode = 1;
let cursorIndex = Math.floor(currentPageIndex / pageMode);
let pdfInstance = null;
let totalPagesCount = 0;
const viewport = document.querySelector("#viewport");
window.initPDFViewer = function(pdfURL) {
pdfjsLib.getDocument(pdfURL).then(pdf => {
pdfInstance = pdf;
totalPagesCount = pdf.numPages;
initPager();
initPageMode();
render();
});
};
function onPagerButtonsClick(event) {
const action = event.target.getAttribute("data-pager");
if (action === "prev") {
if (currentPageIndex === 0) {
return;
}
currentPageIndex -= pageMode;
if (currentPageIndex < 0) {
currentPageIndex = 0;
}
render();
}
if (action === "next") {
if (currentPageIndex === totalPagesCount - 1) {
return;
}
currentPageIndex += pageMode;
if (currentPageIndex > totalPagesCount - 1) {
currentPageIndex = totalPagesCount - 1;
}
render();
}
}
function initPager() {
const pager = document.querySelector("#pager");
pager.addEventListener("click", onPagerButtonsClick);
return () => {
pager.removeEventListener("click", onPagerButtonsClick);
};
}
function onPageModeChange(event) {
pageMode = Number(event.target.value);
render();
}
function initPageMode() {
const input = document.querySelector("#page-mode input");
input.setAttribute("max", totalPagesCount);
input.addEventListener("change", onPageModeChange);
return () => {
input.removeEventListener("change", onPageModeChange);
};
}
function render() {
cursorIndex = Math.floor(currentPageIndex / pageMode);
const startPageIndex = cursorIndex * pageMode;
const endPageIndex =
startPageIndex + pageMode < totalPagesCount
? startPageIndex + pageMode - 1
: totalPagesCount - 1;
const renderPagesPromises = [];
for (let i = startPageIndex; i <= endPageIndex; i++) {
renderPagesPromises.push(pdfInstance.getPage(i + 1));
}
Promise.all(renderPagesPromises).then(pages => {
const pagesHTML = `<div style="width: ${
pageMode > 1 ? "50%" : "100%"
}"><canvas></canvas></div>`.repeat(pages.length);
viewport.innerHTML = pagesHTML;
pages.forEach(renderPage);
});
}
function renderPage(page) {
let pdfViewport = page.getViewport(1);
const container =
viewport.children[page.pageIndex - cursorIndex * pageMode];
pdfViewport = page.getViewport(container.offsetWidth / pdfViewport.width);
const canvas = container.children[0];
const context = canvas.getContext("2d");
canvas.height = pdfViewport.height;
canvas.width = pdfViewport.width;
page.render({
canvasContext: context,
viewport: pdfViewport
});
}
})();
initPDFViewer("https://blog.mozilla.org/security/files/2015/05/HTTPS-FAQ.pdf");
</script>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Ayyub Kolsawala |