Question

我正在为给定文件生成默认头，并且我希望发件人ID具有4个字符，而发件人名称具有45个字符。如果它们分别小于4和45，则需要输入空格以包含4或45个字符。我怎样才能做到这一点？在下图中，您可以看到当我做空白文件时没有填写必要的空格。即使我在发件人ID或发件人姓名上写了些东西，也不会添加任何内容。

我在做什么错？

function download(fileName, text) {
    let element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', fileName);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}
document.getElementById("generate").addEventListener("click", function(){
    
    // Generate .txt file header
    
    //force 4 chars
    let id = document.getElementById("senderID");
    if (id.textContent.length < 4) {

            id.textContent += ' ';

    }
    
    
    //force 45 chars
    let name = document.getElementById("senderName");
    if (name.textContent.length < 45) {
        name.textContent += ' ';
    }
    
    let header = "HDRPB" + id.textContent + name + "01.10";
    let body = document.getElementById("fileContents").textContent;
    
    
    let text = header;
    
    let fileName = document.getElementById("fileName").value + ".txt";
    
    download(fileName, text);
}, false);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/site.css">
    <title>Generator</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-2 p-0 mt-2">
          <label for="senderID" class="font-weight-bold">Sender ID:</label>
          <input id="senderID" type="text" maxlength="4" size="4"/>
        </div>
        <div class="col-6 p-0 mt-2">
          <label for="senderName" class="font-weight-bold">Sender Name:</label>
          <input id="senderName" type="text" maxlength="45" size="45"/>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-10">
          <label for="fileName" class="font-weight-bold">File Name:</label>
          <input id="fileName" type="text"/>
        </div>  
        <div class="col-2">
          <button id="generate" type="button" class="btn btn-light font-weight-bold mx-auto">Generate File</button>
        </div>
      </div>
      <div id="fileContents" class=""></div>
    </div>
    <script src="js/app.js"></script>
  </body>
</html>

Answer 1

考虑以下代码：

function genId(seed) {
  var result = new Array(4);
  for (var i = 0; i < 4; i++) {
    result[i] = seed[i] || "&nbsp;";
  }
  return result.join("");
}

function genName(seed) {
  var result = new Array(45);
  for (var c = 0; c < 45; c++) {
    result[c] = seed[c] || "&nbsp;";
  }
  return result.join("");
}

document.getElementById("genHead").addEventListener("click", function() {
  var i = document.getElementById("hid").value;
  var n = document.getElementById("hname").value;
  var header = genId(i) + genName(n);
  document.getElementById("results").innerHTML = header;
});

#results {
  font-family: monospace;
  border: 1px solid #ccc;
  display: inline-block;
}

<p>ID: <input type="text" id="hid" /></p>
<p>Name: <input type="" id="hname" /></p>
<button id="genHead">Generate Header</button>
<div id="results"></div>

在此示例中，我将创建一个特定数量字符的数组。无论如何，字符串被认为是字符数组。我使用$nbsp;来表示HTML中的空格，但是您可以使用' '或" "。

由于result[c] = seed[c] || " ";始终会有结果，如果seed在该位置有一个字符，它将被输入到result的同一位置。否则，它将输入“不间断空格”或所需的字符。

您也可以这样做：

function formatText(t, n, c) {
  if(t == undefined){
    return "";
  }
  if(n == undefined){
    n = 45;
  }
  if(c == undefined){
    c = " ";
  }
  var r = new Array(n);
  for (var i = 0; i < n; i++) {
    r[i] = t[i] || c;
  }
  return r.join("");
}

然后像这样使用：

var i = formatText("12", 4, " ");
var n = formatText("test", 45, " ");

希望这会有所帮助。

生成txt文件的标题

1 个答案: