How to embed a pdf on a website?

How to embed a pdf on a website?
0

#1

Hello this is my first post on these forums as I have been a newbie-lurker for the past month-ish while working on the freeCodeCamp Front End Dev Certificate.

As part of this, I recently made my first website: https://www.nicholasjacquet.com

The thing that I have been trying to figure out, is what I would need to do in order to add my resume.pdf onto the about.html page so that:

A.) it would be responsively displayed with the bootstrap

&

B.) It would be something that could be downloaded from the page (depending on the device of the user)

I am really stuck on this one ATM and wondering what sorts of things should I be googling right now in order to figure out how I an gonna do this as I have not yet found the “smoking gun” on this one.


#2

There are a few ways in which you can do this.

  1. You just href the pdf file and load it as a seperate page. (I believe this isn’t what you want but I prefer this).
  2. Use <iframe> to place it into your about page. This allows for it to be visible on your page, you are also able to download it. Code: <iframe src="path/to/pdf" width="500" height="700"> If you want it then to be responsive like bootstrap you can use the bootstrap classes on it.
  3. The other way is to just input your CV text manually into the about page and customise it yourself, then with a link to the pdf which they can then download. (My preferred way as you can add a chart for skills and such)

Suggestion:

  • I would make a download button anyway, just makes it more visually clear for the user using your website.

Hope this helps.


#3

The answer given above is quite accurate, I personally suggest using iframe in order to do so. But there also might occur issues with displaying the pdf, it depends on what path would you choose here. I recommend to paste this document to the specific storage for documents of this extension and link to this page in your source code