文本最后在同一行

时间:2018-02-21 18:51:54

标签: javascript html css electron

我今天的节目遇到了麻烦。我在electron.js中写了一个简单的程序,向一个excelfile的成员发送付款爪。

问题是当我尝试从循环中打印成员名称时。

如果我输入

'<p> ' + 'my name' + ' </p>' + 

它工作得很好,但是当我把一个变量放在一起时,它会搞得一团糟。

 '<p> ' + first_name_val + ' </p>' +

enter image description here

整个javascript代码:

var xlsx = require('xlsx');
var workbook = xlsx.readFile('./app/medlemmar.xlsx');

var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
var members = [];
var count = 0;
var payed_count = 0;

for(var i = 12; i < 500; i++)
{
    var id = 'A' + i;
    var first_name = 'B' + i;
    var last_name = 'C' + i;
    var kommentar = 'H' + i;
    var betalt = 'J' + i;

    var d_id = worksheet[id];
    var d_first_name = worksheet[first_name];
    var d_last_name = worksheet[last_name];
    var d_kommentar = worksheet[kommentar];
    var d_betalt = worksheet[betalt];

    if(betalt_val == ' '){
        $("#pageswithpgtalon").append(
           '<div class="page">' +
          '<div class="from">' +
            '<h2>title</h2>' +
            '<p>Intresseförningen</p>' +
          '</div>' +
          '<div class="to">' +
              '<p> ' + first_name_val + ' </p>' +
              '<p>address</p>' +
          '</div>' +
          '<div class="textbox">' +
          '</div>' +
          '<div class="toplusgiro">' + 
            '49 87 85 - 5' +
         ' </div>' + 
          '<div class="paymentrecipient">' +
            'Joakim Wennergren' + 
          '</div>' +
       ' </div>'
        )
    } 

    var id_val = (d_id ? d_id.v : ' ');
    var first_name_val = (d_first_name ? d_first_name.v : ' ');
    var last_name_val = (d_last_name ? d_last_name.v : ' ');
    var kommentar_val = (d_kommentar ? d_kommentar.v : ' ')
    var betalt_val = (d_betalt ? d_betalt.v : ' ')

    if(betalt_val != ' '){
        payed_count++;
    }

    count++;

    if(!d_first_name)
        break;
}

$("#nusers").html(count);
$("#npages_with_pg").html(payed_count);
$("#npages_without_pg").html(count - payed_count);

和我的css:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-print-color-adjust: exact;
  font-size: 14px;
}

@media print {
   body {
    margin: 0px 0px 0px 0px !important;
  }
}

@import "~bootstrap/dist/css/bootstrap.css";

@page {
    margin: 0px 0px 0px 0px !important;
}

.freeh3{
  margin-left: 10px;
}

.freetext{
  width: 100%;
  border: solid 1px #eee;
  background: #fff;
}

*{
  color: #000 !important;
}

th{
  text-align: center;
}
td{
  text-align: center;
}

.jumbotron{
  background: #f8f8f8;
  margin: 0;
}
.jumbotron .btn{
  margin-top: 10px;
  width: 100%;
  color: #fff !important;
}

.tablewrap{
  margin-left: 20px;
  margin-right: 20px;
}

.table{
margin-top: 0;
}


body {

}

a {
  text-decoration: none;
  color: #cb3837;
}

.from{
position: fixed;
left: 20mm;
top: 180px;
font-size: 22px;
}

.to {
  position: fixed;
  right: 30mm;
  top: 160px;
  font-size: 22px;
}

.textbox{
  width: 75%;
  position: fixed;
  top: 340px;
  left:140px;
  max-height: 540px;
  font-size: 16px;
}

.toplusgiro {
  position: fixed;
  bottom: 400px;
  right: 200px;
  font-size: 22px;
}

.paymentrecipient{
  position: fixed;
  bottom: 330px;
  right: 200px;
  font-size: 22px;
  text-align: left;
}


@media print {
  .page {
    page-break-after: always;
  }
}





.format{
  width: 100%;
  height: 100vh;
  position: relative;
  left: 0;
}

.page{
  /*height: 100%;*/
  height: 100vh;
  width: 100%;

  /*
background: repeating-linear-gradient(
  45deg,
  #000,
  #000 10px,
  #fff 10px,
  #fff 20px
);

*/

}
.col-md-6{
  padding: 40px;
  margin: 0;
}

.infobox{
  background: #fff;
  border: solid 1px #eee;
  padding: 20px;
  margin-top: 20px;
}

.btn-block{
  color: #fff !important;
}

1 个答案:

答案 0 :(得分:1)

你已经修复了.from和.to类的位置。这意味着它们将始终位于屏幕上的相同位置。它似乎在您不使用变量时起作用,因为所有.from-s和.to-s都包含相同的文本,因此您不会注意到重叠。