Showing results for 
Show  only  | Search instead for 
Did you mean: 
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


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.
13 Replies
Community Champion

Content type is determined by the headers delivered by the server and the type that you add to an anchor element is just advisory in nature. That means that if Canvas is saying your file is one type, it's not going to matter what you try to say. The only thing I can think of to help is perhaps to make sure that the file has a .pdf extension when you upload it. Some mac users don't use extensions and PC users have trouble opening their content. A long time ago, I tested PDFs without extensions within Canvas because they look nicer and I didn't want the .pdf to show up in the link, but it didn't work. I'm still not sure this would work because you're not using the normal mechanisms for delivering a file.

If you're embedding the content in Canvas using an iframe, then the server that hosts the file is the one that would need to deliver the content-type. Browsers use the content-type header to determine whether it's a PDF, not a file extension, so the right way to do it is to have the server deliver that header. Browsers sometimes attempt to be friendly and so I'm not ruling out that some might take a .pdf extension and try to render it.

Community Participant

 @James ‌,

Thank you! Further investigation has shown that you are correct: the problem is the server, which is sending the following information with my pdfs:

content-disposition: attachment; filename="Cornell_Notes.pdf"

content-type: application/pdf

In other words, the browser is told that the document is a pdf, but the server is forcing the browser to treat the file as an attachment (i.e., download). As far as I can tell, there is no way around this problem at the user end. A change would need to be made at the server. I am having my university investigate, as this is causing grief.

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

Community Participant

This just helped a ton,  I could not get the editor to show up correctly.  Thank you!