Print page in Canvas

[gailc]

I am attempting to add code to allow users to print pages in Canvas. Can anyone provide the code to do so? HTML?

Looking to make pages accessible. Thanks for any help you can provide.

Gail

Gail Chambers
Online Programs Designer
gailc@cciu.org

[aclement]

Fundamentally you can print any page using the javascript print command:

window.print()

You could make a button that gets inserted into each page using theme customization and calls this function when pressed. However, this is not really distinct from just telling the user to print the page from their browser. Is there a more specific process or output that you have in mind?

[karen_bowden]

Canvas strips out that code too. This is annoying.I just want to make it easier for *everyone* to print the page. But it requires too much work to make a pretty pdf of it. 

[Amanda_L_Albrig]

I can add to this conversation. We are looking to create a print button that will print a particular <div> on a page. For example, we create a schedule on a page. Students have asked if they could print just the schedule. We can tell them to select the schedule and then select File>Print>Selection, but that's alot of explanation. If we could just have a print button on the page that read "Print Schedule" that would be perfect.

Amanda

[Amanda_L_Albrig]

If I try to add the basic print command per WC3 Canvas strips out the code.

Code from WC3

<p>Click the button to print the current page.</p>

<button onclick="myFunction()">Print this page</button>

<script>

function myFunction() {

    window.print();

}

</script>

Results on Canvas (no button)

Click the button to print the current page.

Print this page

// <![CDATA[ function myFunction() { window.print(); } // ]]>

[themidiman]

If you're trying to add this functionality to a Canvas page via JavaScript code placed inside the HTML code view of the rich content editor, you'll be running into this problem as the content page has a whitelist of allowed content and throws out everything else. You get much more leverage on your approach if your printable schedule was a file in HTML format in the Files repository. You can pretty much get away with just about any JavaScript content using that approach.

If you absolutely need a Canvas page to do this, Your best bet is to use the global .js and .css overrides to insert a button into the Canvas UI on pages with the schedule in a <div> with a specific ID such as <div id="printableSchedule"> or something like that and then tell it to react to the user clicking on that button and reference your content there.

This tutorial might help you: JavaScript Partial Print Document Tutorial HTML div Content

Good luck!

[karen_bowden]

Unfortunately, we don't all have this kind of access.