首页 > 解决方案 > javascript blob 中的换行符未呈现

问题描述

我知道这是重复的,但是,其他文档中的答案都不起作用。
有谁知道如何保留换行符而不是删除它们?
我也尝试过使用 .replace(/\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 = "&nbsp;";
      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>

标签: javascripthtmljquerycssblob

解决方案


我通过获取 html 然后将所有<br>'s 更改为 's 来解决它\r\n
这是代码;

getResult = $("#resultCode").html();
getResult = getResult.replace(/<br>/g, "\r\n");
var blob = new Blob([getResult],{type:"text/html"});

推荐阅读