DEV Community

Leonel Elimpe
Leonel Elimpe

Posted on

How to embed a PDF file in a dev.to post?

I've been trying the past couple of minutes to embed a PDF file into my post, but for some reason they don't display. Here's what I've tried:

<object data="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf" type="application/pdf" width="700px" height="700px">
    <embed src="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf"></embed>
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf">Download PDF</a>.</p>
    </embed>
</object>
Enter fullscreen mode Exit fullscreen mode

This is how the above code renders:


This browser does not support PDFs. Please download the PDF to view it: Download PDF.



It's supposed to display the PDF document but instead defaults to the Not Supported text. My site equally uses markdown and the above snippet renders properly.

I've equally tried using an iframe but it doesn't render either.
Here's the iframe snippet:

<iframe src="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf" width="100%" height="500px"></iframe>
Enter fullscreen mode Exit fullscreen mode

Would appreciate help from anyone who's succeeded with this before πŸ™.

Top comments (1)

Collapse
 
leonelngande profile image
Leonel Elimpe

I think I did.., is this what you are referring to:

<object data="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf" type="application/pdf" width="700px" height="700px">
    <embed src="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf"></embed>
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="https://www.leonelngande.com/uploads/economics-gce-advanced-level-paper-2-2015.pdf">Download PDF</a>.</p>
    </embed>
</object>

Looking at the <object> tag's attributes you can see type="application/pdf".