We Keep Coding

Display pdf document on website (mobile friendly) with vue.js

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.

Load External Custom Page and Execute Custom CSS or Javascript on The page

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

iFrame is not fixing correctly in android device

i made a android app using it's web view. there contain a lot of functions. payment integration etc. i integrate this payment method using a third party tool. This tool provide an external html page. when i load this page directly in to my web view it's work nicely.
but after i got a requirement that there need a back button in the payment page. after then i add this page using an IFRAME. after there is number of issues came related to the design. the content is not fitting in the IFRAME also there is not displaying the scroll bars.
i tried differant kind of javascript method but no output.
If any solution present for this

Answer to the iframe scrolling problem
1.Zoom in until the iframe portion of the page completely fills the screen.
Tes might activiate the scrollbar and allow you to scroll the iframe.
2.Try double-touching the screen. This means you use two fingers to scroll on the iframe area.
3.If neither #1 or #2 work, try a different browser such as Dolphin, xScope, or Opera.
If none of those three work, try out Firefox. I listed Firefox separately and last because it is slow and resource-intensive on Android, but if it's your only recourse, then use it only when you must.
Can you provide more information on the content not fitting inside the iframe?

Do links with javascript slow down a page?

Due to an issue that came up with a website I have to use javascript for all of the links on the page.
like so...
<img src="image.png"/>
Will having many links with javascript on the webpage slow it down significantly?
Does the Javascript run when the page initially loads or only when a link is clicked?
EDIT: For those asking why I'm doing this. I'm creating an iPad site, when you use the 'add to home page' button to add the site as an icon, it allows users to view the site with no address bar.
However everytime a link is clicked it reopens Safari in a new window with the address bar back.
The only solution I could find was using javascript instead of an html based link to open the page.
For further reference see...
iPad WebApp Full Screen in Safari
2nd answer
"It only opens the first (bookmarked) page full screen. Any next page will be opened WITH the address bar visible again. Whatever meta tag you put into your page header..."
3rd answer down
"If you want to stay in a browser without launching a new window use this HTML code:
a href="javascript:this.location = 'index.php?page=1'"
"

I can see this adding to the bandwidth needs of a site marginally (very marginally), but the render time and the response time on clicking shouldn't be noticeable.
If it is a large concern I would recommend benchmarking the two different approaches to compare the real impact.

What do you mean by slow it down?
Page load time? Depends on the number of links on your page. It would have to be a LOT to be noticeable. Execution time? Again, not noticeable.
The better question to ask is are you o.k. with effectively deleting your website for those without javascript?
Also, if you are worried about SEO, you will need to take additional measures to ensure your site can still be indexed. (I doubt Google follows those kinds of URLs... could be wrong I guess).
EDIT: Now that you explained your situation above, you could easily just "hide" the address bar. See this SO question.

Trigger click on embedded PDF

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).