Notification
Newbie
6 posts
I’ve seen a number of cases where people have tried to use the eLearningBrothers “print.html” technique to create a custom PDF of information gathered during a lesson. Inevitably it has led to frustration. In one case, the administrator forgot to include this custom file in the course module, and in another, the amount of text was larger than that allowed in a URL and broke the call.
The following gets past both of these problems
1. the entire capability is packed into the course source file and will not be inadvertently lost
2. there are no limits on the number or length of variable names
Here’s a simple alternative
1. Add the following code to “On Enter, execute JavaScript”
var printWindow
function writeHeader(txt) {
printWindow.document.write("<H1>"+txt+"</H1> <hr>")
}
function writeName(txt) {
printWindow.document.write("<h3>"+txt+"</h3>")
}
function writeValue(txt) {
printWindow.document.write("<p>"+txt+"</p>")
}
function openPrint() {
printWindow.print()
}
function printVars() {
printWindow=window.open("", "_blank");
sty=` <style type="text/css">
body {
font-family: Sans-Serif;
padding-top: 10px;
padding-left: 10px;
}
#title{overflow:auto;}
#logo{float:right;}
#date{
float:left;
display:inline-block;
position:absolute;
z-index:: 1;
font-family: Sans-Serif;
color: #666666;
padding-left: 22px;
}
h1 {
font-size:26px;
font-family: Sans-Serif;
padding-left: 19px;
margin-top: 27px;
}
h3 {
font-size:18px;
font-family: Sans-Serif;
font-weight:600;
color: #444444;
padding-left: 20px;
}
p {
font-size:14px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
font-family: Sans-Serif;
color: #666666;
padding-left: 20px;
}
hr {
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
}
</style>`
printWindow.document.write(sty);
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() +1;
var curr_year = d.getFullYear();
printWindow.document.write('<div id="date">'+curr_month+"-"+curr_date+"-"+curr_year+'</div>');
fillWindow();
}
2. On the slide you want to create the PDF, add the following code to “on enter, execute javascript”
function fillWindow() {
writeHeader("any text for your header")
writeName("any text here for a name")
writeValue("any text here for a value")
writeName("variablename1")
writeValue(window.cpAPIInterface.getVariableValue("variablename1"))
writeName("variablename2")
writeValue(window.cpAPIInterface.getVariableValue("variablename2"))
// add more name/value pairs here
// this is the last line in the function
openPrint()
}
Just fill in the variable names and values as you need to and create this function
finally,
3. On the slide you want to create the PDF, create a button that has an action “on success, execute javascript”
the code for the button is simply:
printVars();
That’s it.
When you press your “print variables” button, another window will open with a simple format, already set to print. you can set the print function to save as PDF and you’re on your way.
Note – this solution uses a quoting capability only available in the latest versions of Javascript, so if you need to support IE11, some small changes need to be made.
I’ve seen a number of cases where people have tried to use the eLearningBrothers “print.html” technique to create a custom PDF of information gathered during a lesson. Inevitably it has led to frustration. In one case, the administrator forgot to include this custom file in the course module, and in another, the amount of text was larger than that allowed in a URL and broke the call.
The following gets past both of these problems
1. the entire capability is packed into the course source file and will not be inadvertently lost
2. there are no limits on the number or length of variable names
Here’s a simple alternative
1. Add the following code to “On Enter, execute JavaScript”
var printWindow
function writeHeader(txt) {
printWindow.document.write("<H1>"+txt+"</H1> <hr>")
}
function writeName(txt) {
printWindow.document.write("<h3>"+txt+"</h3>")
}
function writeValue(txt) {
printWindow.document.write("<p>"+txt+"</p>")
}
function openPrint() {
printWindow.print()
}
function printVars() {
printWindow=window.open("", "_blank");
sty=` <style type="text/css">
body {
font-family: Sans-Serif;
padding-top: 10px;
padding-left: 10px;
}
#title{overflow:auto;}
#logo{float:right;}
#date{
float:left;
display:inline-block;
position:absolute;
z-index:: 1;
font-family: Sans-Serif;
color: #666666;
padding-left: 22px;
}
h1 {
font-size:26px;
font-family: Sans-Serif;
padding-left: 19px;
margin-top: 27px;
}
h3 {
font-size:18px;
font-family: Sans-Serif;
font-weight:600;
color: #444444;
padding-left: 20px;
}
p {
font-size:14px;
-webkit-margin-before: 0.0em;
-webkit-margin-after: 0.0em;
font-family: Sans-Serif;
color: #666666;
padding-left: 20px;
}
hr {
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
}
</style>`
printWindow.document.write(sty);
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() +1;
var curr_year = d.getFullYear();
printWindow.document.write('<div id="date">'+curr_month+"-"+curr_date+"-"+curr_year+'</div>');
fillWindow();
}
2. On the slide you want to create the PDF, add the following code to “on enter, execute javascript”
function fillWindow() {
writeHeader("any text for your header")
writeName("any text here for a name")
writeValue("any text here for a value")
writeName("variablename1")
writeValue(window.cpAPIInterface.getVariableValue("variablename1"))
writeName("variablename2")
writeValue(window.cpAPIInterface.getVariableValue("variablename2"))
// add more name/value pairs here
// this is the last line in the function
openPrint()
}
Just fill in the variable names and values as you need to and create this function
finally,
3. On the slide you want to create the PDF, create a button that has an action “on success, execute javascript”
the code for the button is simply:
printVars();
That’s it.
When you press your “print variables” button, another window will open with a simple format, already set to print. you can set the print function to save as PDF and you’re on your way.
Note – this solution uses a quoting capability only available in the latest versions of Javascript, so if you need to support IE11, some small changes need to be made.
You must be logged in to post a comment.
- Most Recent
- Most Relevant
Still a very helpful post. 1 question: If a user has added returns (line breaks) to the text in the variable, I want to replace them with a br tag, but I can’t get any combo of regex to work. Any thoughts? Thanks!
For some reason, adobe is stripping all text that looks like html from responses in this forum ,and does not seem to allow editing of responses.
Feel free to contact me directly for more information
Hi Steven
Thank you so much for your solution. I copied and pasted yourJavaScript solution and it works great. Is there any chance you could write some code so I could add a logo jpeg to the top of the PDF?
Many thanks,
Alan
Adding an image would be easiest if you already happened to have a website that uses the logo, then it would be possible to just include a reference to it, rather than the file itself.
If that is true, you simply add the following right before the in the function writeheader :
The url for the image is remarkably easy to find. If you use the chrome browser, you just right click on the image, and select “open image in new window”
the image is shown in the new window, and the url for the image is displayed in the address bar.
