I'm working with vue.js, and I want to display a pdf on a website. I keep seeing a lot of complicated examples of pdf viewers that require an upload button and a conditional display - this is NOT what I need.
I just need to display a hardcoded pdf document within a div on my web page.
This is what I have so far using iframe
I need the width of the actual pdf page to fill up 100% of the width (for legibility). I don't want the grey background to show. The page should also be mobile friendly.
Open to suggestions that include not using iframe, especially if it would make the page more mobile friendly. If you're going to bring up vue-pdf or PDF.js, please include some clear instructions on how to use them.
PS: I am using some parameters to remove the toolbar and navpanes like so:
src="<MY PDF HERE>.pdf#toolbar=0&navpanes=0&scrollbar=1"
I've tried adding &zoom=100 or &view=Fit and that does not fix my problem.
Here is a list of all the parameters.
I lied. Adding &zoom=140 to the end of my pdf url solved my issue.
Related
i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS
I do have a pdf embeded in to the page. It does work and it has it's own buttons, like print, download, rotate, zoom-in, zoom-out.
Is it possible to control these buttons from javascript? I want to show the pdf, but the buttons for download and print I want to control by myslef, with different design and placements outside of the embeded element.
TO sum up, I want to hide all buttons which is shown to the user from the default pdf viewer, except the page number, and I want to separately create donwload and print button with my own design but with the same functionality.
I've done a little bit of research and I found this: https://bugs.chromium.org/p/chromium/issues/detail?id=135146
which is yet has unknown status. Does it mean the API for Chrome pdf viewer doesnt exist? I couldnt fine any.
Another solution is to integrate PDF.js in my own web app, which is heavy (almost 2.6mb zipped) and time consuming.
Any idea is welcome.
I'm working on asp.net quiz application. The mandatory requirement of this application is: when the application starts (page is requested), it automatically enters into full screen.
Now I tried dozen of solutions (JS & Jquery's plugins)
JS Solution
Mozila's
Jquery Plugins
a number of different jquery's plugins, but Chrome & Firefox are not allowing me to do so. Because it states that it needs user interaction for that.
Can somebody please help me out of this situation? Solution can be browser dependent.
Details about application:
Total 5 aspx pages.
One page is an iframe/frame in another page.
Quick and dirty solution. Let's create another page which will be our container page. Put an Iframe there, calculate Iframe height width attribute based on the screen size. make the first page as iframe source. on the iframe put frameborder=0, so from user perspective it will look like single page
For full screen check this link http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
I have a PDF (or PPT) document that i want to embed in a website. This would be done using one of the standard plugins available for this. What I want is to get the current active page number from the plugin in the website.
IE. Using javascript, or anything else, use a function that gets the current active page from the plugin. Does anyone know of either:
a) A specific plugin that would allow this.
b) A workaround, or hack to do this.
Thanks.
No, there isn't. The adobe plugin runs in a completely different sandbox and interacts with the browser through a different API.
You could use imagemagick's command "convert" to turn your pdf into image files, displaying them in the browser via JS. You could create a image slideshow where you know which page your visitor is viewing.
I have a PDF embedded in a web page using the following code:
<object id="pdfviewer" data='test_full.pdf#page=1&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='500px'
height='350px'>
The PDF itself is set to open in full screen mode which shows no controls. The user can advance the slides by clicking on the view.
What I'd like to have is some way to trigger that click so that I can advance 2 similar PDF:s side-by-side (one for the actual slideshow and one for the speaker notes). Is this possible to do in javascript and/or jQuery? I have tried using the click()-method but it doesn't get through to the embedded PDF.
Update: Can't find any info on it, so I guess I'm out of luck and have to try a workaround. Am currently juggling 3 embeds of the same pdf (current page, next page and previous page), hiding and showing them and loading more pages as the user clicks around.
I doubt it. Allowing web page scripts to pass input events to the PDF viewer could be a security risk (since the viewer generally has access to system file dialogues via things like Save As).