AnsweredAssumed Answered

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

Question asked by Melissa Hines on Jan 14, 2019
Latest reply on Apr 23, 2019 by Skyler Todd

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.

Outcomes