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

Question

I Found this on GeeksforGeeks and it solves my some part of issue.我在 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);

I tried to make it as per my requirement, i am generating multiple textareas dynamically in a table within and hiding them, so that for each textarea item shows with download icon when some one clicks on that icon it downloads file with textarea with respective each row content.我试图按照我的要求制作它，我在一个表格中动态生成多个 textareas 并隐藏它们，这样对于每个 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>

It always downloads 1st textarea content even i click on 2nd button, can any please help me how can i get for each download link click it downloads respective textarea content.它总是下载第一个 textarea 内容，即使我单击第二个按钮，请帮助我如何获取每个下载链接，单击它下载相应的 textarea 内容。

Answer 1

firstly you are selected all textarea by SelectorAll then generated the link without loop through it首先你被SelectorAll选中了所有 textarea 然后生成了没有循环的链接
also even if you done a loop that's will generate link for all textarea elements即使你做了一个循环，它会为所有 textarea 元素生成链接
if you want to download the textarea before clicked button it's will be better to add them inside a container and use this keyword如果您想在单击按钮之前下载文本区域，最好将它们添加到container并使用this关键字
or use pervouisSibling或使用pervouisSibling
also it's will be better to use css instead of br tag最好使用 css 而不是br标签
you don't need jQuery because your function already uses Vanillajs你不需要 jQuery 因为你的函数已经使用了 Vanillajs

By adding them inside container通过将它们添加到容器中

HTML 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 CSS

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

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

by previousSibling property通过以前的兄弟财产

HTML 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 CSS

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

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

Answer 2

A quick solution, though not as well designed as JS_INF's solution is to add the incrementor to the forEach and then use it to identify the correct .text_mop using querySelectorAll()一个快速的解决方案，虽然不像 JS_INF 的解决方案设计得那么好，是将增量器添加到 forEach，然后使用它来识别正确的 .text_mop 使用 querySelectorAll()

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

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

问题描述

2 个解决方案

解决方案1
1 2021-07-29 17:31:32

解决方案2
0 2021-07-29 17:35:47

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

问题描述

2 个解决方案

解决方案1 1 2021-07-29 17:31:32

解决方案2 0 2021-07-29 17:35:47

解决方案1
1 2021-07-29 17:31:32

解决方案2
0 2021-07-29 17:35:47