为什么我下载的 HTML 文件没有显示为 HTML？

Question

必填；我离开HTML很久了，从来没有认真玩过javascript。但是现在我正在尝试制作一个可以在本地打开并保存“自身副本”的文档。

<html>
<body>
    <textarea id="inputText" cols=100% rows=20></textarea>
    <button onclick="save()" type="button" id="save">Save Changes</button>
</body>
<script>
    function save() {
        var a = document.createElement("a");
        var breaky = "&lt;br&gt;"
        var string1 = "&lt;textarea id=&quot;inputText&quot; cols=100% rows=20&gt;"
        var string2 = document.getElementById("inputText").value
        a.href = window.URL.createObjectURL(new Blob([breaky.concat(string1,string2,"&lt;/textarea&gt;",breaky)], {type: "text/plain"}));
        a.download = "demo.html";
        a.click();
    }   
</script>
</html>

当我打开 demo.html 时，它只显示 "<br><textarea id="inputText" cols=100% rows=20></textarea><br>" 为纯文本，我不明白为什么。

还有...有没有更好的连接字符串的方法。我试过只使用 + 但在加入 var 和“字符串”时我无法让它工作？

Answer 1

问题是，您“编码”了小于号和大于号。您的输出 HTML 字面意思是 <br><textarea id="inputText"....

您不必将这些字符转换为其 HTML 实体：

<html>
<body>
    <textarea id="inputText" cols=100% rows=20></textarea>
    <button onclick="save()" type="button" id="save">Save Changes</button>
</body>
<script>
    function save() {
        var a = document.createElement("a");
        var breaky = "<br>"
        var string1 = "<textarea id=\"inputText\" cols=100% rows=20>"
        var string2 = document.getElementById("inputText").value
        a.href = window.URL.createObjectURL(new Blob([string1+string2+"</textarea>"], {type: "text/plain"}));
        a.download = "demo.html";
        a.click();
    }   
</script>
</html>

对于字符串连接，您可以像我一样使用加号。

为什么我下载的 HTML 文件没有显示为 HTML？

Why aren't my downloaded HTML file displaying as HTML?

javascript

concatenation

createelement