Question

我有以下html代码，具有以纯文本格式下载内容的功能：

<div class="col-sm-7">
  <ul class="nav nav-pills nav-justified">
    <li role="presentation" class="active">
        <a id="fileNameId" data-toggle="pill" href="#tab" style="font-weight:bold">Server Name
            <button class="btn glyphicon glyphicon-download-alt text-primary tips pull-right" type="button" onclick="downloadFile('fileNameId', 'contentId')" data-placement="bottom" data-original-title="Download1" style="display:block"> </button>
        </a>
    </li>
  </ul>

<div class="tab-content">
    <div id="tab" class="tab-pane fade in active">
        <pre id="contentId">Some text to download</pre>
    </div>
</div>

<script>
    function downloadFile(fileNameId, contentId) {
        var element = document.createElement('a');

        var content = document.getElementById(contentId).innerText.replace(/\r?\n/g, "\r\n");
        var fileName = document.getElementById(fileNameId).innerText.trim();

        console.log(document.getElementById(fileNameId).innerText);

        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
        element.setAttribute('download', fileName+'.txt');

        element.style.display = 'none';
        document.body.appendChild(element);

        element.click();
        console.log(element);
        document.body.removeChild(element);
    }
</script>

注意：contentId是一个pre元素，我需要下载其文本，fileNameId的innerText会动态更改，以便下载的文件名也会相应更改。

现在，问题是JS中的fileName变量包含额外的文本 - “Download1”，它恰好是按钮的data-original-title属性的值。这可以在console.log的o / p中看到：

Server Name Download1

因此，下载的文件名变为 - Server Name -Download1.txt

这是预期的行为吗？当我所做的只是data-original-title时，document.getElementById(fileNameId).innerText的值是如何从JS传递的？

Answer 1

您需要在按钮

之前关闭锚标记

 <li role="presentation" class="active">
        <a id="fileNameId" data-toggle="pill" href="#tab" style="font-weight:bold">Server Name
        </a>
            <button class="btn glyphicon glyphicon-download-alt text-primary tips pull-right" type="button" onclick="downloadFile('fileNameId', 'contentId')" data-placement="bottom" data-original-title="Download1" style="display:block"> </button>
</li>

JS - 传递给javascript函数的“data-original-title”的值

1 个答案: