!DOCTYPE htmlhtmlheadtitleVCGID分割titleheadbodyh3请输入数据并以逗号分隔h3textarea id=data rows=10 cols=200textareabrbutton onclick=splitData提交buttondiv id=outputdivscriptfunction splitData var data = documentgetE
<p>可以在每个文本框下面添加一个下载按钮，点击按钮时触发下载事件。具体实现方式如下：</p>
<ol>
<li>
<p>给每个文本框添加 id 属性，方便获取对应的文本框内容。</p>
</li>
<li>
<p>在每个文本框下面添加一个下载按钮，给按钮绑定点击事件。</p>
</li>
<li>
<p>点击下载按钮时，获取对应文本框的内容，并创建一个下载链接，设置链接属性并触发点击事件，实现下载功能。</p>
</li>
</ol>
<p>修改后的代码如下所示：</p>
<!DOCTYPE html>
<html>
<head>
<title>VCGID分割</title>
</head>
<body>
<h3>请输入数据并以逗号分隔</h3>
<textarea id="data" rows="10" cols="200"></textarea>
<br>
<button onclick="splitData()">提交</button>
<div id="output"></div>
<script>
function splitData() {
var data = document.getElementById("data").value;
var dataArray = data.split(",");
var output = document.getElementById("output");
var boxCount = Math.ceil(dataArray.length / 1000);
var index = 0;
for (var i = 0; i < boxCount; i++) {
var box = document.createElement("textarea");
box.rows = "10";
box.cols = "50";
box.id = "box_" + i; // 添加 id 属性
var boxData = "";
for (var j = 0; j < 1000; j++) {
if (index >= dataArray.length) {
break;
}
boxData += dataArray[index] + ",";
index++;
}
boxData = boxData.slice(0, -1);
box.value = boxData;
output.appendChild(box);
var downloadBtn = document.createElement("button"); // 创建下载按钮
downloadBtn.innerText = "下载文本框" + (i + 1);
downloadBtn.onclick = function() {
var boxId = this.previousSibling.id; // 获取对应文本框的 id
var boxContent = document.getElementById(boxId).value; // 获取文本框内容
var link = document.createElement("a"); // 创建下载链接
link.download = "box_" + (i + 1) + ".txt"; // 设置下载文件名
link.href = "data:text/plain;charset=utf-8," + encodeURIComponent(boxContent); // 设置下载链接地址
link.style.display = "none";
document.body.appendChild(link);
link.click(); // 触发点击事件
document.body.removeChild(link); // 移除下载链接
};
output.appendChild(downloadBtn); // 添加下载按钮到页面
}
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bVR9 著作权归作者所有。请勿转载和采集!