HTML5 write/download to text file

Stephen · **Posted:** October 14th, 2016, 3:06 pm

Here's an interesting tutorial to save data, download as a text file in HTML5 using JavaScript: http://www.tutsandtips.com/javascript/how-to-download-a-text-file-with-javascript/
From the above link:

Code:

<!doctype html>
<html>
<head>
  <title>JavaScript Text File Download Demo</title>
</head>
<body>
  <a href="" id="download">Download</a>
  <script>
  var fileName = 'myfile.txt';
  var fileContent = 'Page content...';
  var myFile = new Blob([fileContent], {type: 'text/plain'});

  window.URL = window.URL || window.webkitURL;
  document.getElementById('download').setAttribute('href', window.URL.createObjectURL(myFile));
  document.getElementById('download').setAttribute('download', fileName);
  </script>
</body>
</html>

Additional similar scripting from JSFiddle (including working demo):
http://jsfiddle.net/k56eezxp/ and http://jsfiddle.net/UselessCode/qm5AG/.

I threw the first script above into an Opus HTML5 test pub (can download IMP, etc. here: https://eLearningprojects.com/tester7.zip).

Can be used by adding it in Advanced publishing tab.

But not familiar enough with translating/using it in Opus, for example, (1) to figure out how to call the named function from an Opus button, (2) or to populate the text file with data from variables inside the Opus pub (like test scores). (Do these get referred to as DW Pub variables? Or prefaced by window.variable, etc.? Use Opus script object or Opus JavaScript object?)

Essentially to bring control of these JavaScript functions inside Opus HTML5 so be able to change/customize it's use in the Opus pub, call the functions from an Opus button, maybe link to and call the JS functions from a linked external JS file.

Goal is to give the user, who takes a few tests, gets scores, to be able to encrypt/save/download these scores in a txt file onto their computer.

How to translate into a more usable script to use from inside Opus?

mackavi · **Posted:** October 17th, 2016, 11:35 am

Hi Stephen,

It's a potential idea but at the moment the 'download' attribute has limited browser support - so it won't work for a lot of users.

In terms of taking it forward, you can add it directly to a button using a JS action and:

Code:

var fileName = 'myfile.txt';
var fileContent = 'my name is Stephen...';
var myFile = new Blob([fileContent], {type: 'text/plain'});

window.URL = window.URL || window.webkitURL;


var link = document.createElement('a');
document.body.appendChild(link);
link.setAttribute("id","download")
link.style.display = "none";

var dl = document.getElementById('download')
dl.setAttribute('href', window.URL.createObjectURL(myFile));
dl.setAttribute('download', fileName);
dl.click();
dl.parentNode.removeChild(dl);

</mack>

Stephen · **Posted:** October 17th, 2016, 2:13 pm

Thank you, Mack.

I tried using a variable to populate the text file. Appears that reference to a variable, already being used in the pub, needs to be prefaced with _DWPub. (plus the variable).

Again, thank you.

Digital Workshop

HTML5 write/download to text file

Who is online