How to Display PDFs on a Drupal Site

An OSTraining member asked us about attaching PDFs to a Drupal site.

It is possible to use the default File field and allow people to download the PDF. However, this member wanted visitors to read the PDF directly on the site.

Step #1. Install the PDF Reader module

For this tutorial, you will need the PDF Reader module.

Step #2. Add the field

Now that we have installed the module, we are going to add it to the Basic Page content type. You can add this to any content type following the same steps:

• Go to Structure > Content types
• Select “edit” next to Basic page

• Select the manage fields tab
• Give the new field a name. For simplicity, I am simply calling mine “PDF”.
• In Field Type column, select File.
• Widget should then display File. Don’t worry about this, we’ll define the PDF in a moment.

• Save the changes.

Step #3. Configure the field

Now we need to configure the settings for our new field.

• I’m going to check both options, so that you have the file displayed by default.
• Save the settings.

Now we have to configure the manage field settings. We have to make one important change to this page. By default, the only file types allowed are txt files. We need to add PDF as an option.

• Allowed file extensions

• Go to manage display and update the PDF format from generic file to PDF Reader 
• You will now see a cog with more advanced options if you want to tweak the display of the PDF. But for this I am just going to use the default display.
• Save the changes to the managed display.

Step #4. Select the PDF

Now we have a basic page content type. It has an additional field option to add a PDF and display it with a PDF reader.

• Create your content. Or edit it if you have added this to an existing content type.
• Under body, you will see a PDF section just like below.

• Select your file, press upload, and wait for the upload to finish.
• Once uploaded scroll to the bottom and select Save.

Check the end result

You should now see your content with the PDF displayed. By default, the scroll option is to scroll down to continue reading. But, you can adjust that by returning to display settings and changing the cog options.

Below you see my working demo displaying Acquia Drupal 8 guide.