How to Use PDFs on Your 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:
- Extractpdf.com
- PDF-to-Text (Mac app)
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:
- Wait for Slideshare to process your PDF.
- When Slideshare has finished, you’ll see the PDF on the page. Click the Embed button:
- Copy the embed code that Slideshare provides:
- Click the Customize button and you’ll be able to customize the embed.
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:
- WordPress plugin (seems unsupported)
- Joomla extension
- Drupal module (D6 only)
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:
- Flip through the PDF pages using tools at the bottom.
- Scroll through the PDF using the scrollbar on the right.
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.
Lots of fantastic information and one of my customers has many .pdfs so this is very, very helpful. Thank you.
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
You’re welcome, Judy!
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?
Thanks wiser3, that’s very interesting
I know PDF was a proprietary format controlled by Adobe for many years. That was very limiting.
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.
Good point, Warren. Few organizations will want to make big changes to simplify things for their web-designers or visitors.