单击 HTML 按钮时如何触发带有文本区域内容的文件下载答案

【问题标题】：How to trigger a file download with text area content when clicking an HTML button单击 HTML 按钮时如何触发带有文本区域内容的文件下载
【发布时间】：2021-10-05 08:00:06
【问题描述】：

我在 GeeksforGeeks 上找到了这个，它解决了我的部分问题。

<script>
    function download(file, text) {
    
        //creating an invisible element
        var element = document.createElement('a');
        element.setAttribute('href',
        'data:text/plain;charset=utf-8, '
        + encodeURIComponent(text));
        element.setAttribute('download', file);
    
        // Above code is equivalent to
        // <a href="path of file" download="file name">
    
        document.body.appendChild(element);
    
        //onClick property
        element.click();
    
        document.body.removeChild(element);
    }
    
    // Start file download.
    document.getElementById("btn")
    .addEventListener("click", function() {
        // Generate download of hello.txt
        // file with some content
        var text = document.getElementById("text").value;
        var filename = "GFG.txt";
    
        download(filename, text);
    }, false);

我尝试按照我的要求制作它，我在其中的表格中动态生成多个 textarea 并隐藏它们，这样当有人点击该图标时，每个 textarea 项目都会显示下载图标，它会下载带有 textarea 的文件各行内容。

                    function download(file, text) {
                    
                        //creating an invisible element
                        var element = document.createElement('a');
                        element.setAttribute('href', 'data:text/html;charset=utf-8, ' + encodeURIComponent(text));
                        element.setAttribute('download', file);
                        document.body.appendChild(element);
                        element.click();            
                        document.body.removeChild(element);
                    }
                    document.querySelectorAll('.btn_mop').forEach(item => {
                        item.addEventListener('click', event => {
                            var text = document.querySelector('.text_mop');
                            var filename = "MOP.txt";
                            download(filename, text);
                        }, false)
                    })

                p {
                color: green;
                }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
        <html>
        <body>
            <style>
        
            </style>
        
                <textarea class="text_mop" style="display: none;">Welcome to 1st sentence</textarea>
                <br/>
                <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
        
                
                <textarea class="text_mop" style="display: none;">Welcome to 2nd sentence </textarea>
                <br/>
                <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
        </body>
        </html>

即使我点击第二个按钮，它总是会下载第一个 textarea 内容，任何人都可以帮助我如何获取每个下载链接点击它下载相应的 textarea 内容。

【问题讨论】：

var text 被设置为 .text_mop 的第一个实例。您需要在事件的上下文中选择文本。

标签： javascript php html jquery css

【解决方案1】：

首先你被SelectorAll选中了所有的textarea，然后生成了没有循环的链接
即使您执行了一个循环，该循环也会为所有 textarea 元素生成链接
如果您想在单击按钮之前下载文本区域，最好将它们添加到 container 中并使用 this 关键字
或使用pervouisSibling
另外，使用 css 代替 br 标签会更好
你不需要 jQuery，因为你的函数已经使用了 Vanillajs

通过将它们添加到容器中

HTML

<div class="container">
     <textarea class="text_mop" style="display: none;">Welcome to 1st sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
 </div>
 <div class="container">
     <textarea class="text_mop" style="display: none;">Welcome to 2nd sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
 </div>

CSS

.text_mop, .btn_mop {
   display: block;
  width: auto;
}

JS

function download(file, text) {
  //creating an invisible element
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/html;charset=utf-8, ' + encodeURIComponent(text));
  console.log(element.href);
  element.setAttribute('download', file);
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

var btn_mop = document.getElementsByClassName("btn_mop");
for (var btn of btn_mop) {
  btn.addEventListener("click", function() {
    var text = this.parentNode.getElementsByClassName("text_mop")[0];
    var filename = "MOP.txt";
    download(filename, text.value)
  });
}

按 previousSibling 属性

HTML

<textarea class="text_mop" style="display: none;">Welcome to 1st sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
 
     <textarea class="text_mop" style="display: none;">Welcome to 2nd sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />

CSS

.text_mop, .btn_mop {
     display: block;
    width: auto;
}

JS

function download(file, text) {
  //creating an invisible element
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/html;charset=utf-8, ' + encodeURIComponent(text));
  element.setAttribute('download', file);
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

var btn_mop = document.getElementsByClassName("btn_mop");
for (var btn of btn_mop) {
  btn.addEventListener("click", function() {
    var text = this.previousSibling.previousSibling
    var filename = "MOP.txt";
    download(filename, text.value)
  });
}

【讨论】：

【解决方案2】：

一个快速的解决方案，虽然不如 JS_INF 的解决方案设计得那么好，但是将增量器添加到 forEach，然后使用它使用 querySelectorAll() 来识别正确的 .text_mop

document.querySelectorAll(".btn_mop").forEach((item,i) => {
  item.addEventListener("click", (event) => {
    var text = document.querySelectorAll(".text_mop")[i];
    console.log(text)
  });
});

【讨论】：