asked on

How to display PDF in web page?

Hello. I have a page where I am archiving newsletters. On the right I have the newsletters listed and to the left I am displaying the most current edition. The newsletters are just PDF files with multiple pages. So to display them I used the <object> tag. This is working but it is displaying the newsletters extremely small. Even if I increase the width of the div the newsletter stays the same. Can someone tell me what I'm doing wrong?

This is how I'm displaying the PDF file:

<div class="news_container">
        <div class="pdf_content">
            <object data="../../Newsletter/2019/CIDD_Newsletter_Issue_April2019.pdf" type="application/pdf" width="100%" height="100%">
                <p>Your browser does not support PDFs.
                <a href="../../Newsletter/2019/CIDD_Newsletter_Issue_April2019.pdf">Download the PDF</a>.</p>
            </object>
        </div>

Open in new window

This is how I'm displaying the list of newsletters:

<div class="newsletter_list">
            <div style="padding: 4px 0px 4px 6px;">
                <a href="../../Newsletter/2019/CIDD_Newsletter_Issue_April2019.pdf" target="_blank">Current edition (April 2019) &raquo;</a>
            </div>
            <div style="margin-top: 6px; padding: 3px 0px 3px 6px; background-color: #e5e5e5;">
                Past Editions
           </div>
            <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/2018/CIDD_Newsletter_Issue_November_2018.pdf" target="_blank">November 2018 &raquo;</a>      </div>
       <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/2018/CIDD_Newsletter_Issue_April2018.pdf" target="_blank">April 2018 &raquo;</a>      </div>
       <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/CIDD_Newsletter_Issue_Nov_2017.pdf" target="_blank">November 2017 &raquo;</a>      </div>
       <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/CIDD_Newsletter_Issue_June 2017.pdf" target="_blank">June 2017 &raquo;</a>      </div>
       <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/CIDD_Newsletter_Issue_FEB2017.pdf" target="_blank">February 2017 &raquo;</a>      </div>
       <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/CIDD_Newsletter_Issue_Sept2016.pdf" target="_blank">September 2016 &raquo;</a>      </div>
       <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/CIDD_Newsletter_Issue_April2016.pdf" target="_blank">April 2016 &raquo;</a>      </div>
       <div style="padding: 4px 0px 4px 6px;">
         <a href="../../Newsletter/CIDD_Newsletter_Issue_Jan2016.pdf" target="_blank">January 2016 &raquo;</a>      </div>

Open in new window

This is the CSS. I'm using flexbox.

.news_container{
          display:flex;
          flex-direction: row;
          justify-content: space-around;
      }

Open in new window

I've attached a file that shows how it is displaying
smallPDF.jpg

zc2

How about shown the PDF in IFRAME?

<iframe src="../../Newsletter/2019/CIDD_Newsletter_Issue_April2019.pdf" width="100%" height="100%"></iframe>

Open in new window

cdlciddit

ASKER

Hello. I tried that. It looked almost exactly the same. Should I take the iframe out of the div? Here is how I implemented it.

<div class="pdf_content">
            <iframe src="../../Newsletter/2019/CIDD_Newsletter_Issue_April2019.pdf" width="100%" height="100%"></iframe>
        </div>

Open in new window

zc2

<div class="pdf_content"> container should have a correct box size. I don't see a CSS rule for that neither for div.newsletter_list
Do they have the "flex" CSS properties defined? Guess, without them, their widths would be (incorrectly) defined by the browser. Did you try to use the F12 browser developer's tool to figure out the page layout and how that should be adjusted.

ASKER CERTIFIED SOLUTION

zc2

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

David Favor

Keep in mind, http://www.cidd.unc.edu/Newsletter/2019/CIDD_Newsletter_Issue_April2019.pdf will use the native browser PDF implementation, so all will appear well.

Using <object> or <iframe> will likely attempt to try to scale your PDF to the current viewport.

For best comments, provide the exact http://www.cidd.unc.edu URL where problem is shown.

lenamtl

Hi,

I would use a simple ahref

<a  href="files/document.pdf" target="_blank">PDF</a>

Open in new window

This will use user preferences method (from advance browser settings) to preview in browser or save on desktop.

If you really need to preview inside the browser you could use this Javascript https://mozilla.github.io/pdf.js/

If you really need to use embed I have not tried this one yet but this worth a tried https://pdfobject.com/#the-why

cdlciddit

ASKER

Hello @zc2. Correct. I didn't have a CSS rule for pdf_content. I was naming it before I created the rule. I knew I needed one. I just didn't know what. Is that where I put a width and height for the content of the pdf file? Same thing for newsletter_list. I just knew I would need a rule but didn't know exactly what rule yet. I usually just name all my divs when I create them with meaningful names so that I can go back and add CSS later. Yes. I tried inspector but I wasn't able to figure out what I needed to do to fix the size of the box with the actual PDF.

zc2

cdlciddit, did you have a chance to play with the fiddler I sent you? In a case you missed my comment: https://jsfiddle.net/h1Lac8pz/

The idea, that you have a flex child which is a container for the iframe and its size depends on the browser's flex rendering. The iframe just uses 100% as you initially intended to do.

cdlciddit

ASKER

Thanks @zc2. That's exactly what I need. I will try to implement it and report back.

cdlciddit

ASKER

Thanks @David Favor. I will keep that in mind.

cdlciddit

ASKER

Thanks @lenamtl. I have a few things i'm trying now. It has to be displayed in the browser, so if the information that zc2 gave me doesn't work I will try the javascript option.

cdlciddit

ASKER

Hello @zc2. That worked!!!! Thanks so much. I am a total newbie to flexbox. You have just given me a very valuable lesson. Thank you.

cdlciddit

ASKER

Thank you @zc2, @David Favor and @lenamtl for all your help. I learned a lot from your comments.

zc2

You are welcome!