I have an <object> element (see below) into which a PDF is being loaded. Currently, users can simply right-click on it and download it in Chrome. Firefox even shows a download button.
I want to prevent users from downloading the PDF, so I want to disable right-click, and I also want to prevent them from highlighting and copying the text. And since <object> elements don't respond to click events, I am handling the click event in the <div> below it with (contextmenu)= "myFunction()".
The problem is that disabling right-click in this way also disables scrolling for some reason. So does style="pointer-events: none". I need to disable right-clicks and highlighting on the PDF but the user still needs to be able to scroll to view the pages below.
I am using Angular 7 so this is being done with HTML and Typescript. The PDF file is coming from Firebase Storage.
<object width="100%" height="690" type="application/pdf" [data]="([login to view URL])">
<div style="position:absolute; top:0; left:0; bottom:0; right:0;" (contextmenu)="onRightClick($event)"></div>