如何在 JavaScript 中以 TXT 格式保存文件，但仅保存特定部分/特定元素标签

嘿，我想保存页面上显示的特定数据的txt格式。

您输入的变量：

你要教的人：a

1 他们真正想要的结果：b

2 他们真正想要的结果：c

他们最害怕的一件事：d

他们最害怕的两件事：e

您可以交付的时间范围：f

我要教一个如何

我要教一个如何在c中b。

我要教一个如何

请帮我解决这个问题，非常感谢。

	function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
function myFunction() {
	/////////////////////////////////////////////////////
	document.getElementById("but1").style.display = "block";
	document.getElementById("but2").style.display = "block";
	document.getElementById("but3").style.display = "block";
	document.getElementById("but4").style.display = "block";
	var a = document.getElementById("myText1").value;
var b = document.getElementById("myText2").value;
var c = document.getElementById("myText3").value;
var d = document.getElementById("myText4").value;
var e = document.getElementById("myText5").value;
var f = document.getElementById("myText6").value;
//////////////////////////////////////////////////////
	 var col = "Variables You Entered:";
	 var one = "lorem1:" + a;
	 var two = "#lorem2:" + b;
	 var three = "#2lorem3:" + c; 
	 var four = "#1 lorem4: " + d;
	 var five = "#2 lorem5:" + e;
	 var six = "lorem6:" + f;
	 document.getElementById("col").innerHTML = col;
	 //var onetext = one.concat(a);
	 document.getElementById("one").innerHTML = one;
	 document.getElementById("two").innerHTML = two;
	 document.getElementById("three").innerHTML = three;
	 document.getElementById("four").innerHTML = four;
var str1 = "test ";
var str2 = " test1 ";
var str3 = " test2 ";
var str4 = " test3 ";
var str5 = " test4";
var str6 = " test5 ";
var res1 = str1.concat(a,str2,b);
document.getElementById("res1").innerHTML = res1;
var res2 = str1.concat(a,str2,b,str3,c);
document.getElementById("res2").innerHTML = res2;
////////////////////////////////
var res3 = str1.concat(a,str2,c);
document.getElementById("res3").innerHTML = res3;
var res4 = str1.concat(a,str2,c,str3,f);
document.getElementById("res4").innerHTML = res4;
/////////////////////////////////////////////
}
function saveTextAsFile()
{
var textToWrite = 'test';
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("wrapper").value;
var downloadLink = document.createElement("wrapper");
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.download = fileNameToSaveAs;
downloadLink.click();    
}

<!DOCTYPE html>
<html>
<style type="text/css">
	#but1,#but2,#but3,#but4,#but5,#but6,#but7,#but8,#but9,#but10,#but11,#but12,#but13,#but14,#but15,#but16,#but17,#but18,#but19,#but20,#but21,#but22
	{
		display: none;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js">
<body>
lorem ipsum text
<label>lorem ipsum text</label><br>
<input type="text" placeholder="enter a" id="myText1"><br>
lorem ipsum text
<!--////////////////////////////////////////////////-->
<br>
<input type="text" placeholder="enter b" id="myText2"><br>
lorem ipsum text
<!--////////////////////////////////////////////////-->
lorem ipsum text
<br><input type="text" placeholder="enter c" id="myText3"><br>
lorem ipsum text
<!--////////////////////////////////////////////////-->
lorem ipsum text
<br><input type="text" placeholder="enter d" id="myText4"><br>
lorem ipsum text
<br><input type="text" placeholder="enter e" id="myText5"><br>
lorem ipsum text
lorem ipsum text
<br><input type="text" placeholder="enter f" id="myText6"><br>
lorem ipsum text
<br><button onclick="myFunction()">Click me</button>
<a href="" id="link" onclick="setupDownloadLink('#wrapper', txt.value)" download="code.txt">Download file</a>
<div id="wrapper">
<p id="col"></p>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>
<p id="five"></p>
<p id="six"></p>
<p id="res1"></p>
<button id="but1" onclick="copyToClipboard('#res1')">Copy</button>
<p id="res2"></p>
<button id="but2" onclick="copyToClipboard('#res2')">Copy</button>
<p id="res3"></p>
<button id="but3" onclick="copyToClipboard('#res3')">Copy</button>
<p id="res4"></p>
<button id="but4" onclick="copyToClipboard('#res4')">Copy</button>
</div>

我对你的 JS 代码做了一些调整，有一些逻辑错误......我还编辑了<a>标签并更改了它及其功能......我认为它现在工作得更好。
请看一看。

function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
function myFunction() {
	/////////////////////////////////////////////////////
	document.getElementById("but1").style.display = "block";
	document.getElementById("but2").style.display = "block";
	document.getElementById("but3").style.display = "block";
	document.getElementById("but4").style.display = "block";
	var a = document.getElementById("myText1").value;
var b = document.getElementById("myText2").value;
var c = document.getElementById("myText3").value;
var d = document.getElementById("myText4").value;
var e = document.getElementById("myText5").value;
var f = document.getElementById("myText6").value;
//////////////////////////////////////////////////////
	 var col = "Variables You Entered:";
	 var one = "People you are going to teach:" + a;
	 var two = "#1 Result They Really Want:" + b;
	 var three = "#2 Result They Really Want:" + c; 
	 var four = "#1 Thing They FEAR Most: " + d;
	 var five = "#2 Thing They FEAR Most:" + e;
	 var six = "Time frame You Can Deliver in:" + f;
	 document.getElementById("col").innerHTML = col;
	 //var onetext = one.concat(a);
	 document.getElementById("one").innerHTML = one;
	 document.getElementById("two").innerHTML = two;
	 document.getElementById("three").innerHTML = three;
	 document.getElementById("four").innerHTML = four;
var str1 = "I'm going to teach ";
var str2 = " how to ";
var str3 = " in ";
var str4 = " and ";
var str5 = " without ";
var str6 = " or ";
var res1 = str1.concat(a,str2,b);
document.getElementById("res1").innerHTML = res1;
var res2 = str1.concat(a,str2,b,str3,c);
document.getElementById("res2").innerHTML = res2;
////////////////////////////////
var res3 = str1.concat(a,str2,c);
document.getElementById("res3").innerHTML = res3;
var res4 = str1.concat(a,str2,c,str3,f);
document.getElementById("res4").innerHTML = res4;
/////////////////////////////////////////////
}
function saveTextAsFile()
{
var fileNameToSaveAs = document.getElementById("wrapper").innerText;
//Use replace if you want to remove something, like the word Copy...
fileNameToSaveAs = fileNameToSaveAs.replace(/Copy/g,"");
var textFileAsBlob = new Blob([fileNameToSaveAs], {type:'text/plain'});
var downloadLink = document.createElement("a");
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.download = textFileAsBlob;
downloadLink.click();    
}

<!DOCTYPE html>
<html>
<style type="text/css">
	#but1,#but2,#but3,#but4,#but5,#but6,#but7,#but8,#but9,#but10,#but11,#but12,#but13,#but14,#but15,#but16,#but17,#but18,#but19,#but20,#but21,#but22
	{
		display: none;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js">
<body>
lorem ipsum text
<label>lorem ipsum text</label><br>
<input type="text" placeholder="enter a" id="myText1"><br>
lorem ipsum text
<!--////////////////////////////////////////////////-->
<br>
<input type="text" placeholder="enter b" id="myText2"><br>
lorem ipsum text
<!--////////////////////////////////////////////////-->
lorem ipsum text
<br><input type="text" placeholder="enter c" id="myText3"><br>
lorem ipsum text
<!--////////////////////////////////////////////////-->
lorem ipsum text
<br><input type="text" placeholder="enter d" id="myText4"><br>
lorem ipsum text
<br><input type="text" placeholder="enter e" id="myText5"><br>
lorem ipsum text
lorem ipsum text
<br><input type="text" placeholder="enter f" id="myText6"><br>
lorem ipsum text
<br><button onclick="myFunction()">Click me</button>
<a href="" id="link" onclick="saveTextAsFile()">Download file</a>
<div id="wrapper">
<p id="col"></p>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>
<p id="five"></p>
<p id="six"></p>
<p id="res1"></p>
<button id="but1" onclick="copyToClipboard('#res1')">Copy</button>
<p id="res2"></p>
<button id="but2" onclick="copyToClipboard('#res2')">Copy</button>
<p id="res3"></p>
<button id="but3" onclick="copyToClipboard('#res3')">Copy</button>
<p id="res4"></p>
<button id="but4" onclick="copyToClipboard('#res4')">Copy</button>
</div>

编辑：要删除"复制"一词，请使用带有g标签的替换方法(我更新了片段并注释了该部分)以删除所有出现的情况......
关于无换行符，对我来说，每行后都有一个换行符..如果您想添加更多，只需附加一些<br>标签，然后何时进行下载，将其替换为nr

嘿，我想保存页面上显示的特定数据的txt格式。

相关内容

最新更新

热门标签：