How to export text entries to a Word document
Mar 01, 2022
Hi all.
I was looking for how to export Storyline text entries to Word here on E-Learning Heroes, but even though there has been a bit of discussion about it over the years, I couldn't find a solution. Please forgive me if someone has posted one – I couldn't find it.
Anyway, I've got a solution to share (it was actually a collaboration between myself and my son with bits and pieces we grabbed off the internet). You can paste the javascript as it is below but, depending on how you want the final Word doc to look, you may need to make some modifications.
I've included comments in the javascript, which hopefully makes sense as to which bits you might want to change.
I've also attached a couple of different story files as examples showing how you can customise the output.
I hope this is useful!
Cheers, Craig
var player = GetPlayer();
// ADD ANY GLOBAL CSS HERE - I have changed the font to Calibri and set the white-space to allow for line breaks
var HtmlHead = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><style>body {font-family: Calibri, Arial, sans-serif; white-space: pre;}</style></head><body>";
var EndHtml = "</body></html>";
// ENTER YOUR HTML/CONTENT HERE - use strings for tags and player.GetVar for the Storyline variables
var html = HtmlHead +
"<h1>Activity 1</h1>"
+ player.GetVar("TextEntry")
+ EndHtml;
//This specifies the type
var blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
// This specifies the link url
var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
// SPECIFY THE FILE NAME HERE
filename = 'DocumentName.doc';
// This specifies the download link element
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob ){
navigator.msSaveOrOpenBlob(blob, filename);
}else{
// This sets the link to the file
downloadLink.href = url;
// This sets the file name
downloadLink.download = filename;
// This triggers the function
downloadLink.click();
}
7 Replies
This is great! Your downloaded sample files worked perfectly. I'm having trouble stylizing the imported variables. As an example, I would want the variable text that's imported to be larger in font size and red in colour. This is how I'm trying to write this code (Sorry, I'm pretty new to Javascript), but it doesn't seem to work. Any advice?
<p style='font-size:24px; color:#B80003;'> player.GetVar("TextEntry") </p>
Hi Julio
Any HTML tags need to be put in quotes and then the Storyline variable gets added using plus (+) symbols, so the example you have would look like this:
"<p style='font-size:24px; color:#B80003;'>" + player.GetVar("TextEntry") + "</p>"If you are including any tags before the p tag here, then make sure it is all included within one set of quotes, e.g. the whole code would look like this:
I hope this helps.
It can get pretty confusing when you're trying to string together several variables with all of the plus signs and quotes!
Cheers, Craig
Craig! You identified my error! Thanks so much for the input.
I do have a couple of questions that maybe you could shed some insight.
1. I noticed that the word document isn't taking the font size parameters I'm identifying in my tags. Like this one:
<h1 style='font-size:24px; color:#B80003;'>.In the document I export the font colour transfers over, but it doesn't take the font size. I'm new to this but I suspect it's using the H1 styling from the word document and not from the code.
2. Any idea how I can code in a 'shift+enter' break? so that in my document instead of:
line one
line two
It's
line one
line two
No worries if you can't answer those questions, you've already been a great help.
Hi Julio
1. To change font-size to match what you see in the Word document, you can use pt instead of px. If you change the code to
<h1 style='font-size:24pt; color:#B80003;'>it should align. I probably should have used that in my earlier example rather than px, sorry. I'm just more used to px.2. To add a line break, use the
<br>tag. So, a line of code would look like this: <p>Line one<br>Line two</p>Hope that works :)
Hi Craig
I'm looking at using something similar to this where learners will be building/writing up a CV through a number of slides in an activity.
Do you know how you would code it so that heading 1 in the document is collected from a text entry field? For example - the heading I want to use in the document is a text entry variable called first_name
At the moment my code looks like this for having the document header
// ENTER YOUR HTML/CONTENT HERE - use strings for tags and player.GetVar for the Storyline variables
var html = HtmlHead +
"<div style='font-size:20px;font-weight:bold; <H1>"+first_name+"</H1>";
but when the word document opens - it just gives me an empty document
I also have this code to write up the body of the document:
contents+="<div style='font-size:16px;font-weight:bold;
+ player.GetVar("ContactDetails")
+ player.GetVar("PersonalStatement")
"<h2>Education</h2>"
+ player.GetVar("Education")
"<h2>Employment</h2>
however, I'm not seeing any of the other headers or the other variables Personal statement or Education in the document
And is it possible that the document they download also uses a text entry variable or do I have to use a generic name that will be the same for everyone that downloads the document?
Thank you
Does anyone know how to make this work for PDF? What would the code be?
Hi all,
I know this thread is a bit old but I figured I'd ask anyway -
Is there a way to modify this code so that, when exporting multiple text entry fields, you will only export the ones that the learner has actually typed into?
For instance, if you have SL text variables "textentry1", "textentry2", and "textentry3", and the learner has entered text into "textentry1" and "textentry2" but "textentry3" is still the default value, that only "textentry1" and "textentry2" would get exported into the document?