从动态创建的窗口下载文本文件

我正在尝试创建一个小书签，它将允许教师突出显示网页上的文本并将该选择下载为纯文本（.txt）文件。我已设置a demo page以显示我正在工作以及卡住的位置。从动态创建的窗口下载文本文件

在演示页面上，我可以突出显示文本并使用“下载选择”按钮直接下载。但是，如果您错误地突出显示，则必须返回并重新执行。 “制作页面”按钮可抓取突出显示的文本，并创建一个包含文本的弹出框以进行打样。

的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; 
}

当我点击弹出的下载按钮，我得到的控制台类型错误：

Uncaught TypeError: window.getElementById is not a function

我搬到脚本该文件，但无论它在哪里，错误返回，我不明白为什么。任何想法如何让这个工作？

来源

2015-10-16 Brian

正确的语法是

document.getElementById()

尝试

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; 
}

来源

2015-10-16 11:59:47

窗口对象不具备的getElementById方法。使用document.getElementById代替

来源

2015-10-16 12:00:38

您正试图从不提供该功能的对象中调用函数。

而不是打电话window.getElemenyById()你应该做document.GetElementById()。

所以要进一步澄清，这里是你的代码进行适当的修正。

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; 
}

两者之间的详细区别，由用户Bergi的回答提供。

窗口对象表示当前浏览上下文。它包含了像window.location，window.history，window.screen， window.status或window.document的东西。此外，它还包含有关框架设置（框架，父框架，顶层框架，自身属性）的信息，并且包含applicationCache，XMLHttpRequest，setTimeout，转义，控制台或localStorage等重要接口。最后但并非最不重要的是，充当JavaScript的全局范围，即所有全局变量都是的属性。

相反，（window。）文档对象代表当前在窗口中加载的的DOM - 它只是其中的一部分。文档拥有像documentElement（通常），集合表单，cookie字符串，其位置或其readyState等信息。它还实现了不同的接口（可能有多个文档，例如通过ajax获取的XML文档），并使用方法（如getElementById或addEventListener）。

来源

2015-10-16 12:05:53 Dayan

从动态创建的窗口下载​​文本文件

回答

相关问题

从动态创建的窗口下载文本文件