如何在javascript中以txt格式保存文件但只保存特定部分/特定元素标签

Question

Hey all i want to save txt format a particular data shown on page.嘿，我想将 txt 格式保存为页面上显示的特定数据。

Variables You Entered:您输入的变量：

People you are going to teach:a你要教的人：a

1 Result They Really Want:b他们真正想要的 1 个结果：b

2 Result They Really Want:c 2 他们真正想要的结果：c

1 Thing They FEAR Most: d他们最害怕的一件事：d

2 Thing They FEAR Most:e 2 他们最害怕的事情：e

Time frame You Can Deliver in:f您可以交付的时间范围：f

I'm going to teach a how to b我要教a如何b

I'm going to teach a how to b in c我要教 a 如何 b in c

I'm going to teach a how to c我要教一个如何c

Please do help me out with this thanks a lot.请帮我解决这个问题，非常感谢。

 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>

Answer 1

I Made some adjusts on your JS code, there was some logic errors... also i edited the <a> tag and changed it and its function... I think it is working much better now.我对你的 JS 代码做了一些调整，有一些逻辑错误......我还编辑了<a>标签并改变了它和它的功能......我认为它现在工作得更好。
please, take a look.请看一下。

 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>

EDIT : to remove the word "Copy", use the replace method (I updated the snippet and commented that part) with the g tag to remove all occurences...编辑：要删除“复制”一词，请使用带有g标记的替换方法（我更新了代码段并注释了该部分）以删除所有出现的...
about the no line breaks, for me, there is a line break after every line.. if you want to add more, just append some <br> tags and then when will make the download, replace it with \\n\\r关于没有换行符，对我来说，每一行后面都有一个换行符..如果你想添加更多，只需附加一些<br>标签，然后什么时候进行下载，用\\n\\r替换

如何在javascript中以txt格式保存文件但只保存特定部分/特定元素标签

问题描述

Hey all i want to save txt format a particular data shown on page.嘿，我想将 txt 格式保存为页面上显示的特定数据。

1 个解决方案

解决方案1
0 已采纳 2018-02-23 14:13:19

如何在javascript中以txt格式保存文件但只保存特定部分/特定元素标签

问题描述

Hey all i want to save txt format a particular data shown on page.嘿，我想将 txt 格式保存为页面上显示的特定数据。

1 个解决方案

解决方案1 0 已采纳 2018-02-23 14:13:19

解决方案1
0 已采纳 2018-02-23 14:13:19