Question

我需要在.txt文件中保存html表格的内容。所以我找到了这个例子：

page.html中：

<html>
<body>
    <div>
        <textarea id="textbox">Type something here</textarea> 
        <button id="create">Create file</button> 
        <a download="info.txt" id="downloadlink" style="display: none">Download</a>
    </div>
</body>

create.js：

(function () {
var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});

     if (textFile !== null) {
     window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    return textFile;
  };

  var create = document.getElementById('create'),
  textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');
    link.href = makeTextFile(textbox.value);
    link.style.display = 'block';
  }, false);
})();

此代码有一个文本区域。当您点击按钮时，它会创建一个＆＃34;下载＆＃34;链接并通过单击它可以将文本区域内容下载为txt文件。

我正在尝试实现一个非常相似的功能。唯一不同的是我从html表中获取我的字符串。这是代码：

HTML：

<div class="container">
<div class="row" style="">
    <section class="module span12" style="top: 50px">
        <div class="module-body">
            <button type="button" class="btn-blue"
                style="top: 80px; right: 130px;" onclick="loadOutputs()">Load
                Outputs</button>
            <button class="btn btn-blue" id="save" onclick="createText()"
                style="top: 80px; right: 130px;">Save</button>
            <a download="info.txt" id="downloadlink" style="display: block">Download</a>
            <div id="loadingElement" class="loaded">
                <table>
                    <tbody id="tbody"></tbody>
                </table>
            </div>
        </div>
    </section>
</div>
<div class="row"></div>

的javascript：

function createText() {

    var text = '';
    var table = document.getElementById("tbody");
    if (table) {
        for ( var i = 0, row; row = table.rows[i]; i++) {
            text = text.concat(row.innerText);
            }
    }

    var textFile = null, makeTextFile = function(text) {

        var data = new Blob([text], {type: 'text/plain'});
        if (textFile !== null) {
            window.URL.revokeObjectURL(textFile);
        }

        textFile = window.URL.createObjectURL(data);
        return textFile;
    };

    var create = document.getElementById('save');

    create.addEventListener('click', function() {
        var link = document.getElementById('downloadlink');
        link.href = makeTextFile(text);
        link.style.display = 'block';
    }, false);
}

在js代码中，当我调试时，我看到它成功地用表的内容填充了text变量，但是无法进入create.addEventListener（）。

在函数变量链接里面似乎是“未定义”，所以我假设它不能进入函数内部。可能是什么问题？

Answer 1

这里的问题是，你有一个名为createText的函数，它包含所有代码，包括保存处理程序......然后你的按钮的onclick属性正在调用createText函数。 ...

在上面的工作示例中，实际代码位于IIFE块中，该块在页面加载时执行...因此您需要使用IIFE或在页面加载时调用函数createText并删除{{1从按钮开始，因为实际的点击处理程序是使用脚本注册的。所以

onclick="createText()"

(function(){
    
    var textFile = null,
        makeTextFile = function (text) {
            
            var data = new Blob([text], {
                type: 'text/plain'
            });
            if (textFile !== null) {
                window.URL.revokeObjectURL(textFile);
            }
            
            textFile = window.URL.createObjectURL(data);
            return textFile;
        };
    
    var create = document.getElementById('save');
    
    create.addEventListener('click', function () {
        var text = '';
        var table = document.getElementById("tbody");
        if (table) {
            for (var i = 0, row; row = table.rows[i]; i++) {
                console.log('a')
                text = text.concat(row.innerText);
            }
        }
        
        var link = document.getElementById('downloadlink');
        link.href = makeTextFile(text);
        link.style.display = 'block';
    }, false);
})()

addEventListener单击功能不起作用

1 个答案: