To embed a PDF file inside a webpage you can use an
<iframe> element, and add the path to your PDF file as a source value:
By default, iframes have a border that you can remove with the
<iframe src="path-to-your-file.pdf" frameborder="0"></iframe>
You may also want to add a width and height to your iframe. You can either do that with a CSS class or with inline styling.
In the example below, I add a
width value of
100% so that the iframe expands to whatever the width of your parent container is (which is a good practice). I also give it a
height value of
50vh which means that the iframe will take up 50% of the height of whatever screen you’re viewing it on.
<iframe src="path-to-your-file.pdf" style="width:100%;height:50vh;" frameborder="0" ></iframe>
Change the width and height to whatever you need for your project.