How to Use PDFs on Your Website

PDF website

PDFs are a real problem for website builders.

The PDF format was first launched over 20 years ago, and it was designed to be a fixed-layout flat document.

When the PDF format was designed, there were about a dozen websites in the whole world. Needless to say, the PDF format was created without considering the needs of websites at all.

However, PDFs are still used offline by organizations who create millions of PDF files every year. The trouble comes when those organizations want to place PDF.

In this tutorial we’ll suggest some ways that you can make PDFs work on your website, if you really need to.

Option #1. Take the content out of your PDF

If there’s any way that you can take your content out of the PDF, please do.

You’ll make life easier for yourself and your visitors.

Getting text out of a PDF isn’t easy, so the best solution is to get the text and images from the original document before the PDF was created.

If that’s not possible, there are some apps and tools available. For example:

Option #2. Use a link

This is the easiest solution. You’ll provide a link so that people can click and download the PDF to read on their computer.

  • Upload the PDF to your site.
  • Create a link to the PDF.

Option #3. Embed code

The easiest way to deal with PDFs online is the same as the easiest way to deal with videos and presentations … use an external service.

Slideshare.net is one of the best options to host your PDFs.

  • Create an account at Slideshare.net.
  • Click the Upload button and submit your PDF file:
media_1379944921635.png
  • Wait for Slideshare to process your PDF.
  • When Slideshare has finished, you’ll see the PDF on the page. Click the Embed button:
media_1379943740726.png
  • Copy the embed code that Slideshare provides:
media_1379943681638.png
  • Click the Customize button and you’ll be able to customize the embed.
media_1379943700045.png

To actually use that embed code into your site, copy-and-paste that embed code into your content.

If you’re using WordPress, Joomla, Drupal or another CMS, you should probably make disable your WYSIWYG editor or make sure it’s not stripping out code. Slideshare uses an iframe format, but those can sometimes contain dangerous code, so some CMSs will restrict their use.

You can find out more on using code in your content here:

There are also some plugins available, although not all of them are up-to-date:

When the embed code is in your article, it will appear as in the image below. Viewers can browse the PDF file in two ways:

  1. Flip through the PDF pages using tools at the bottom.
  2. Scroll through the PDF using the scrollbar on the right.
media_1379943793981.png

There many alternatives to Slideshare. Here are some of the best:

#4. A PDF Repository

The most complex option is the best choice if you have a large amour of PDFs.

WordPress, Joomla, Drupal and other platforms allow you to upload and store a large number of documents. Here are some recommendations:

  • WordPress: WordPress Download Manager
  • Joomla: Phoca Download or Docman
  • Drupal: you can use the default file field.

It’s also worth mentioning Alfresco which is the best open source solution for massive document repositories.

Instructor

  • Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Blog Rating
Subscribe
Notify of
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
OnTheWaterLifestyle

Lots of fantastic information and one of my customers has many .pdfs so this is very, very helpful. Thank you.

JudyAC

Thanks, Steve. As you know we are loading hundreds of PDFto out County government site and it’s reassuring that you feel #4 is the best choice as that is how we’re doing it! Judy

steve

You’re welcome, Judy!

wiser3

We create A LOT of pdf’s for our public website, intranet website,

external distribution, etc… As corporate policy they are always saved

to be compatible with Adobe Reader 4 and later.
I was having trouble getting a large complex pdf i created to print

in booklet form. It was taking 12 minutes per page to print. I tried

saving it to be compatible with version 10 or higher. It printed in

about 25 seconds per page and the file was a little less then half the

size. Great .
With some experimenting i found that i could save it as low as for

version 6 to get most of the printing time benefits and as low as

version 8 to get most of file size benefits.
Web developers are always studying browser usage so they can optimize

html/css for the most popular browser versions. Why don’t we do the same

for our pdf’s?

steve

Thanks wiser3, that’s very interesting
I know PDF was a proprietary format controlled by Adobe for many years. That was very limiting.

Warren Post

Thanks for the nice wrapup of PDF options. Just to underscore one point that was alluded to above, most of my clients want PDFs online for only one reason, which is institutional inertia. They don’t understand the disadvantages of encapsulating their online information in PDF, and I consider it part of my job to educate them. Granted, some clients don’t want to be educated, and some have legitimate use cases for PDFs. But option #1 on this list is number one for a good reason.

steve

Good point, Warren. Few organizations will want to make big changes to simplify things for their web-designers or visitors.

7
0
Would love your thoughts, please comment.x
()
x