cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
mah11
Community Participant

How to display pdf in browser (not downloading!) from HTML file?

Jump to solution

My course site is in HTML and stored in Files on Canvas. For the purposes of discussion, assume it has two pages:

index.html  <-- This is the home page

info.html

My site opens to the home page and all subsequent pages, including info.html, are displayed directly. The site is not directly edited within Canvas, not with the rich text editor. 

The page info.html contains a number of links to pdf files, which I would like to open in the browser. For example, my syllabus is displayed on the info.html page using the following html-standard code:

<p><a href="assets/general/Syllabus.pdf" target="_parent">My Syllabus</a></p>

where assets/general/Syllabus.pdf is the relative address of the syllabus with respect to the home page. When I click the link "My Syllabus," the behavior is platform dependent:

Safari on Mac: Syllabus.pdf downloads file  <-- incorrect

Firefox on Mac: Syllabus.pdf downloads file  <-- incorrect

iPad: Syllabus.pdf opens in parent window  <-- correct behavior

Question: What code do I use to get a pdf to open in the parent browser window on all platforms?

A number of solutions have been suggested previously:

  • Store the pdf on Google drive and link to that: This is insecure (anyone with the link can access the file) and obviates the need for Canvas.
  • Replace the pdf with a jpeg image. This degrades resolution and has poor accessibility (e.g., for vision impaired students) 
  • Use direct addressing instead of indirect addressing in the href. This does not work (and causes problems when the file is updated.) 
  • Others have suggested that opening a pdf in a browser is a security risk. This is silly. Also, Canvas displays the pdf in the window as the default behavior on iOS. I just want to replicate this behavior on a Mac.
2 Solutions

Accepted Solutions
jmnau
Community Participant

Hi  @mah11 !

You can set the file to auto-open an inline preview of PDF files, rather than require the user to download. I usually use the options in the editor to do this, but looked at the code for you so you can try that and see if it works. I bolded the part that is added when the inline preview option is selected.

<a class="instructure_file_link instructure_scribd_file auto_open" title="file.pdf" href="https://community.canvaslms.com/files/9620003/download?wrap=1">File Name</a>

For how to do it using the rich content editor, go here How do I set the auto-open for inline preview for files using the Rich Content Editor as an instruct...

Let me know if either of these options works!

Julie

View solution in original post

mah11
Community Participant

I raised this issue with Canvas support, and they have acknowledged that this is a bug. They suggested that people who would like this fixed need to submit a feature request. If you are affected by this bug and would like it fixed, you may wish to vote for or add comments to the following suggestion:

Suggestion: Fix bug in Canvas display of pdfs

View solution in original post

13 Replies
jmnau
Community Participant

Hi  @mah11 !

You can set the file to auto-open an inline preview of PDF files, rather than require the user to download. I usually use the options in the editor to do this, but looked at the code for you so you can try that and see if it works. I bolded the part that is added when the inline preview option is selected.

<a class="instructure_file_link instructure_scribd_file auto_open" title="file.pdf" href="https://community.canvaslms.com/files/9620003/download?wrap=1">File Name</a>

For how to do it using the rich content editor, go here How do I set the auto-open for inline preview for files using the Rich Content Editor as an instruct...

Let me know if either of these options works!

Julie

mah11
Community Participant

 @jmnau ,

Thanks for the reply, but this does not work (I have tried) as described in my (now complete) message. Sorry for posting a partial message, but the editor posted the message when I left for a seminar.

Melissa

Stef_retired
Community Team
Community Team

Hi,  @mah11 , I've shared your question with the Instructional Designers‌ group to attract the attention of your fellow HTML and design experts. It might help if you were to show a screenshot of what your course site looks like so we can better understand how it differs from using the native tools of Canvas to accomplish this.

mah11
Community Participant

Hi stefaniesanders,

Thanks! A screen shot is below. The "Schedule of TA Office Hours" link near the bottom, for example, links to a pdf.

Screen shot of Canvas site

kmeeusen
Community Coach
Community Coach

I just have one quick question,  @mah11  ..............

If I were a student going to this site for the very first time, what would I do or where would I go to start learning

While all of the information represented by those links and tabs are undoubtedly important, could not most of them rather be included in a syllabus with just one link to that document?

As a student, I would find this site very intimidating.

Here is a quote from How Five Web Design Principles Boost Student Learning in an Online Course......

"The challenge of designing online courses is not only pedagogical, but also technical, which is the category that ‘usability’ falls under. We are at the point with online learning where pedagogy and technology are interdependent; where a well-designed, user-friendly course with a clear learning path needs to adhere to technical principles as well as pedagogical ones. Technology is a new form of pedagogy. The course site design, how content is presented, is an aspect of online pedagogy."

Here are some further resources on the importance of online course design, and the need for simplicity........

All of which brings me back to my original question. Students in an online course need to know what they must do, where to do it, and how to get help when they can't.

I hope this is helpful.

Kelley

mah11
Community Participant

 @kmeeusen ,

As described in my question, this is not the landing page of the website. The landing page consists of 5 buttons that take students to various parts of the website. The page that I am showing is what you call a “syllabus.” The advantage of making this document html — instead of a linked document as per your suggestion — is that the index on the left hand side allows students to rapidly access the desired information when it is needed. For example, what is the policy on exam conflicts? In a class with more than 800 students, it is important to disseminate this information en masse instead of dealing with questions individually.

Having said that, my question is not about website design per se. It is specifically focused on the display of pdfs.

Melissa

James
Community Champion

I can see where Kelley would be confused because that's not how I read your post, either. Emphasis is mine, but shows why it sounds like the landing page for your site.

My course site is in HTML and stored in Files on Canvas. For the purposes of discussion, assume it has two pages:

index.html <-- This is the home page

info.html

My site opens to the home page and all subsequent pages, including info.html, are displayed directly. The site is not directly edited within Canvas, not with the rich text editor.

Canvas is not meant to host a website within it. You embed content in iframes if you want to do that and host them somewhere else. Alternatively, design it to work and look like Canvas that makes for a more consistent interface for students. If you build it into Canvas, you also get tracking of who views the PDF and there will be a preview button that will show it inside the browser.

The PDF issue sounds like one of content types not being set properly or settings within a browser. Sometimes on Chrome I can click on a PDF and it will display in the browser and other times it wants to save it and make me open it in Adobe. Firefox allows me to decide. You shouldn't try to force your users to open something in a browser, though.

kmeeusen
Community Coach
Community Coach

Hi again, Melissa!

Now this makes much more sense! I use a tool called SoftChalk, that is essential a WSSIWYG HTML content builder. It can be used to create multiple page HTML documents with a built-in Table of Contents. Nice little tool. Below ios a picture of a part of the TOC from one of my syllabi.....

303346_pastedImage_1.png

None of which, of course, helps you with your PDF inline preview issue.

I hope some of the smarter folks in here (those who can actually read), will be able to help you.

Kelley

mah11
Community Participant

James,

I have tried specifying the content type in in the href to no avail. For example, the following has no effect:

<p><a href="assets/general/Syllabus.pdf" target="_parent" type="application/pdf">My Syllabus</a></p>

Do you have a specific technique in mind to do this?

As far as forcing content to be displayed in the browser goes, what I am trying to do is to get the HTML to use the browser's preferences. In my experience, most people have their browser set to display pdf inline, either using built-in functionality or a third-party solution. Canvas is overriding this preference and downloading the pdf, which is not standard behavior.

Melissa