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();
}
4 Replies
Julio P

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>

Craig Agnew

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:

var html = HtmlHead +
"<h1>Activity 1</h1><p style='font-size:24px; color:#B80003;'>"
+ player.GetVar("TextEntry") + "</p>"
+ EndHtml;

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

Julio P

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.

 

Craig Agnew

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 :)