Embedding PDF files

You want to display PDF files embedded in Moodle. You can do this in two ways. Firstly, you can upload a PDF as normal via the “File” resource and select the embed appearance option. Secondly, you can use the text editor to embed a PDF almost anywhere in Moodle.

We want to show you these two options.

This option is the simplest. However, the embedded PDF is only visible when the file is clicked on in the Moodle course.

To do this, upload the PDF file. Either by drag & drop as described in the FAQ Uploading learning material . Or via “ Add an activity or resource” > “File”.

In the file settings, you can select the Embed option in the Appearance section. Save the file.

If you now click on the file in the course, a subpage will open on which the PDF is displayed embedded.

Section “Appearance” in the file settings
Section “Appearance” in the file settings

This option is a little more complex, but allows PDF embedding almost anywhere in the Moodle course, e.g. directly on the course page or on a subpage, in the “Book” and “Lesson” resources, etc.

In the following, we will create an example of a page that contains an embedded PDF document. The PDF is scaled to the available width. Other paragraphs and formatting on the text page are retained.

The instructions are basically transferable to other scenarios (use of text and media field on the course page, book, lesson, …) in which the text editor is used.

Step1: Uploading the PDF file

Text editor
Text editor

Write any word in the text area of the editor, for example “PDF”, and select it. Then click on the button ''Insert link''.

In the opening dialogue, click on the “Search repositories” field. Now select “Upload file” and, after clicking on “Select file”, select your PDF file. Then confirm with “Upload file”.

Upload file
Upload file

Step 2: Embedding a PDF document

To embed the PDF document, you must switch to HTML mode. To do this, click on the Tools tab and then on <> Source code.

A window opens with code that should be similar to the one shown below.

Switch to HTML mode
Switch to HTML mode
Source code
Source code

Add the following code below:

<center><iframe src="PDF" style="width: 100%; height: 1000px;" quality="high" type="application/pdf"></iframe></center>

Replace in the code behind “iframe src=” the word PDF with the URL to your uploaded PDF file (see “Source code” figure). In this case, the result should look like this:

<center><iframe src="https://moodle.tu-darmstadt.de/draftfile.php/26/user/draft/145351869/Infoblatt%20OpenLearnWare.pdf" style="width: 100%; height: 1000px;" quality="high" type="application/pdf"></iframe></center>

Now delete the original link (see figure “Source code”) and click Save in the source code window. This is then closed and an empty box is displayed in the editor. Save the changes and display the content. The PDF should now be displayed there.