javascript blob 中的换行符未呈现
Posted
技术标签:
【中文标题】javascript blob 中的换行符未呈现【英文标题】：Line breaks in javascript blob are not rendering 【发布时间】：2021-04-06 06:59:46 【问题描述】：我知道这是重复的，但是，其他文档中的答案都不起作用。有人知道如何保留换行符而不是删除它们吗？我也尝试过使用 .替换（/\n/g，“\r\n”），但它不起作用。任何帮助将不胜感激，谢谢。 代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var a = setTimeout(dST, 2500);
var b;
var c;
var d;
var e;
var getResult;
function dST()
$("#startText").remove();
function create()
b = $("#linkedTo").val();
c = $("#nameIs").val();
d = $("#doesWhat").val();
if (c.indexOf('-') != -1)
e = "customElements.define('" + c + "', class extends " + b + " <br>connectedCallback() <br>" + d + "<br><br>);";
$("#resultCode").html(e);
else
console.log("hello");
function downloadA()
getResult = $("#resultCode").text();
var blob = new Blob([getResult],
type: "text/javascript",
endings: "native"
);
download(blob, "javascript-file.js");
function download(blob, name)
var url = URL.createObjectURL(blob),
div = document.createElement("div"),
anch = document.createElement("a");
document.body.appendChild(div);
div.appendChild(anch);
anch.innerHTML = " ";
div.style.width = "0";
div.style.hright = "0";
anch.href = url;
anch.download = name;
var ev = new MouseEvent("click", );
anch.dispatchEvent(ev);
document.body.removeChild(div);
</script>
</head>
<body>
<p id="startText">This creates elements for you, but is still in beta stage.</p>
<input value="HTMLElement" id="linkedTo" type="text" readonly>
<input placeholder="aa-bb" id="nameIs" type="text">
<br>
<textarea rows="15" cols="57" placeholder="var p = document.body.createElement('P'); p.innerHTML = 'Hello, World!'; $('body').append('<p>Hello, World!</p>');" id="doesWhat" type="text"></textarea><br>
<button type="button" onclick="create(); $('#resultCode').css('border', '1px solid black'); if($('#nameIs').val().indexOf('-') != -1) $('#downloadB').css('opacity', '1'); else $('#downloadB').css('opacity', '0'); ">Create</button>
<pre id="resultCode"></pre>
<button id="downloadB" type="button" onclick="downloadA()" style="opacity: 0">Download</button>
</body>
</html>【问题讨论】：
这些字符只是纯文本中的换行符，它们没有在 HTML 中实现。使用br 元素，或将文本插入显示纯文本的元素中，例如textarea。
<p> 可以工作吗？
不，不会的。
您可以将换行符替换为<br />，这是换行符的 HTML 标记。查看更多：w3schools.com/tags/tag_br.asp
【参考方案1】：
我通过获取 html 然后将所有 <br> 更改为 \r\n 解决了这个问题。
这是代码；
getResult = $("#resultCode").html();
getResult = getResult.replace(/<br>/g, "\r\n");
var blob = new Blob([getResult],type:"text/html");
【讨论】：
以上是关于javascript blob 中的换行符未呈现的主要内容，如果未能解决你的问题，请参考以下文章
Javascript：body.append(content) 未呈现为 html [重复]
如果在全页刷新 (FPR) 后未呈现文件，我如何有条件地在 h:head 中呈现 .js 文件？
如何获取未使用 javascript 呈现的 dom 元素？
Python Flask 页面未使用外部 CSS 和 Javascript 呈现