单击 HTML 按钮时如何触发带有文本区域内容的文件下载
Posted
技术标签:
【中文标题】单击 HTML 按钮时如何触发带有文本区域内容的文件下载【英文标题】：How to trigger a file download with text area content when clicking an HTML button 【发布时间】：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 的第一个实例。您需要在事件的上下文中选择文本。 【参考方案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)
);
);
【讨论】：
以上是关于单击 HTML 按钮时如何触发带有文本区域内容的文件下载的主要内容，如果未能解决你的问题，请参考以下文章