Download text file from dynamically-created window

Question

I'm trying to create a small bookmarklet which will allow teachers to highlight text on a webpage and download that selection as a plain text (.txt) file. I have a demo page set up to show what I have working and where I'm stuck.

On the demo page, I can highlight text and download it directly using the "Download Selection" button. But, if you mis-highlight, you have to go back and do it again. The "Make Page" button grabs the highlighted text and creates a popup with the text for proofing.

script.js

function makePage(text) {
  var text = "";
  if(typeof window.getSelection != "undefined") {
    text = window.getSelection().toString();

    var newPage = window.open("", null, "height=200,width=300,status=yes,menubar=no");
    newPage.document.write("<body><a id='download' download='text.txt'></a><p id='copy'>" + text + "</p><button id='download' onclick='getPlainText()'>Download</button><scipt type='text/javascript' src='script.js' defer></script></body></html>");
    console.log(text)
  }
}

function getPlainText(copy) {
  var text = "";
  if(typeof window.getSelection != "undefined") {
    text = window.getElementById('copy').innerContent;

    var download = document.getElementById('download');
    download.href = 'data:text/plain;charset:utf-8,' + encodeURIComponent(text);
    var event = new MouseEvent('click');
    download.dispatchEvent(event);
  }
  return text;
}

When I click the Download button on the popup, I get a TypeError in the console:

Uncaught TypeError: window.getElementById is not a function

I've moved the script in the document, but regardless of where it is, the error returns and I can't figure out why. Any ideas on how to get that to work?

score 2 · Accepted Answer · answered Oct 16 '15 at 11:59

the right syntax is

document.getElementById()

try

function getPlainText(copy) {
  var text = "";
  if(typeof window.getSelection != "undefined") {
    text = document.getElementById('copy').innerContent;

    var download = document.getElementById('download');
    download.href = 'data:text/plain;charset:utf-8,' + encodeURIComponent(text);
    var event = new MouseEvent('click');
    download.dispatchEvent(event);
  }
  return text;
}

score 1 · Answer 2 · answered Oct 16 '15 at 12:00

1

window object don't have getElementById method. Use document.getElementById instead

answered Oct 16 '15 at 12:00

Denis Krasakov

1,498
2
13
17

score 0 · Answer 3 · edited May 23 '17 at 12:14

You are attempting to call a function from and object that doesn't provide that function.

Instead of calling window.getElemenyById() you should be doing document.GetElementById().

So to further clarify, here is your code with the proper correction.

function getPlainText(copy) {
  var text = "";
  if(typeof window.getSelection != "undefined") {
    //Here from window to document
    text = document.getElementById('copy').innerContent;

    // Ironically you used "document" here ;]
    var download = document.getElementById('download');
    download.href = 'data:text/plain;charset:utf-8,' + encodeURIComponent(text);
    var event = new MouseEvent('click');
    download.dispatchEvent(event);
  }
  return text;
}

A detailed difference between the two, as provided by an answer from the user Bergi.

The window object represents the current browsing context. It holds things like window.location, window.history, window.screen, window.status, or the window.document. Also, it has information about the framing setup (the frames, parent, top, self properties), and holds important interfaces such as applicationCache, XMLHttpRequest, setTimeout, escape, console or localStorage. Last but not least it acts as the global scope for JavaScript, i.e. all global variables are properties of it.

In contrast, the (window.)document object represents the DOM that is currently loaded in the window - it's just a part of it. A document holds information like the documentElement (usually ), the forms collection, the cookie string, its location, or its readyState. It also implements a different interface (there might be multiple Documents, for example an XML document obtained via ajax), with methods like getElementById or addEventListener.

Download text file from dynamically-created window

3 Answers3