Search code examples
javascripthtmlvue.jspdfpdf-viewer

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

enter image description here

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.

Solution

  • I lied. Adding &zoom=140 to the end of my pdf url solved my issue.