Let's have a look at the easiest way to embed PDFs onto your website.
The simplicity of this solution comes from the fact that we're using the web browser's built-in (native) PDF viewer using <iframe>.
Video Tutorial
If you prefer, you can see how to embed PDFs in video form 👇
How to Embed PDFs
All you need to do is specify an <iframe>, and set the src attribute to the path of your PDF file. We can also remove the frame border using frameborder="0".
For example:
<iframe src="documents/file.pdf" frameborder="0"></iframe>
When running the above code in your browser, you should see a small area where your PDF file is being generated. If you wish to resize it, you can do so using CSS.
Resize Using CSS
Let's begin by adding an id to the <iframe>, then, apply some styles in CSS:
<iframe id="myPDF" src="documents/file.pdf" frameborder="0"></iframe>
#myPDF {
width: 85%;
height: 975px;
}
Feel free to experiment with the CSS styles to suit your liking 🙂
Enrol Now 👉 JavaScript DOM Crash Course
You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇
Happy coding 😎
Top comments (0)