将 FileSaver.js saveAs() 函数实现到 HTML 脚本中

Question

现在我正在尝试使用 javascript 和 FileSaver.js 包将我正在创建的 HTML 页面中的信息保存到文本文档中。我不太精通 HTML 并且对 javascript 完全陌生，所以很可能我犯了一些严重的错误。目前，我在与我正在使用的 HTML 文件相同的目录中有 eligrey 的 FileSaver.js 文件，所以我应该可以简单地将它称为 "FileSaver.js" in [=32] =].

现在我正在做这样的事情：

//some irrelevant text

<script src="FileSaver.js">
  function download(){
    
    //alert("hello world");
    //this alert line was to test the function call
    //the alert actually appears when the <script> tag
    // has no src field labeled. Just an observation.
    
    var blob = new Blob(["Hello World"],{type:"text/plain;charset=utf-8"});
    saveAs(blob,"helloworld.txt");
   }
</script>

//some more irrelevant text

<input type="button" value="download" onclick="download();"/>
/*from this button I want to gather information from input text fields on the page.
 I already know how to do that, the problem is creating and, subsequently, 
downloading the text file I am trying to create. For simplicity's sake, the text I am 
capturing in this example is hardcoded as "hello world"*/

//last of irrelevant text
//oh, and don't try to run this snippet :P

我的直接工作目录中也有 eligrey 的 Blob.js 文件，以防万一。

到目前为止，该按钮没有任何作用。考虑到我可以收到 javascript 警报文本，至少当脚本标签没有 src 时，我相当确定我正在正确调用该函数。如果我确实添加了一个 src，绝对没有任何反应。我正在测试的浏览器是 Windows XP 上最新的 Google Chrome 稳定版本（我认为是 43.0）。请告诉我任何我遗漏的 and/or 做错的事情。提前致谢

Answer 1

您不能拥有带有 src 属性和内容的脚本标签。将其拆分为两个单独的脚本标签。参见 What if script tag has both "src" and inline script?

注意 <script> cannot be a self-closing tag

<script src="FileSaver.js"></script>
<script>
  function download(){

    //alert("hello world");
    //this alert line was to test the function call
    //the alert actually appears when the <script> tag
    // has no src field labeled. Just an observation.

    var blob = new Blob(["Hello World"],{type:"text/plain;charset=utf-8"});
    saveAs(blob,"helloworld.txt");
   }
</script>

将 FileSaver.js saveAs() 函数实现到 HTML 脚本中

Implementing FileSaver.js saveAs() function into HTML script

html

javascript

blob

filesaver.js