Вопрос выравнивания в jquery печати - PullRequest
Новая
       1

Вопрос выравнивания в jquery печати

1 голос
/ 21 марта 2020

О проблеме

Я пытаюсь сделать jquery распечатать div. В настоящее время он показывает оба div по вертикали. Но он должен быть выровнен по горизонтали. Не могли бы вы предложить что-нибудь?

Предварительный просмотр

enter image description here

JQuery Код 

function printData() {
    var divToPrint = document.getElementById("Print");
    newWin = window.open("");
    newWin.document.write(divToPrint.outerHTML);
    newWin.print();
    newWin.close();
}

HTML Код 

<div id="Print" class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-md-6">
            <h2>Left Side</h2>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">First Name</label>
                    <label class="control-label">First Name</label>
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Last Name</label>
                    <label class="control-label">Last Name</label>
                </div>
            </div>                  

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Address</label>
                    <label class="control-label">Address</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">ID</label>
                    <label class="control-label">ID</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Contact Number</label>
                    <label class="control-label">Contact Number</label>
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">E-Mail Address</label>
                    <label class="control-label">E-Mail Address</label>
                </div>
            </div>

        </div>
        <div class="col-sm-6 col-md-6">
            <h2>Right Side</h2>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">First Name</label>:&nbsp;                      
                    <label class="control-label">First Name</label>:&nbsp;                      
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Last Name</label>
                    <label class="control-label">Last Name</label>
                </div>
            </div>                  

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Address</label>
                    <label class="control-label">Address</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">ID</label>
                    <label class="control-label">ID</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Contact Number</label>
                    <label class="control-label">Contact Number</label>
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">E-Mail Address</label>
                    <label class="control-label">E-Mail Address</label>
                </div>
            </div>                                  
        </div>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 21 марта 2020

Ваш код работает хорошо. Убедитесь, что вы правильно интегрировали инструментарий. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


function printData() {
    var divToPrint = document.getElementById("Print");
    newWin = window.open("");
    newWin.document.write(divToPrint.outerHTML);
    newWin.print();
    newWin.close();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div id="Print" class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-md-6">
            <h2>Left Side</h2>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">First Name</label>
                    <label class="control-label">First Name</label>
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Last Name</label>
                    <label class="control-label">Last Name</label>
                </div>
            </div>                  

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Address</label>
                    <label class="control-label">Address</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">ID</label>
                    <label class="control-label">ID</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Contact Number</label>
                    <label class="control-label">Contact Number</label>
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">E-Mail Address</label>
                    <label class="control-label">E-Mail Address</label>
                </div>
            </div>

        </div>
        <div class="col-sm-6 col-md-6">
            <h2>Right Side</h2>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">First Name</label>:&nbsp;                      
                    <label class="control-label">First Name</label>:&nbsp;                      
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Last Name</label>
                    <label class="control-label">Last Name</label>
                </div>
            </div>                  

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Address</label>
                    <label class="control-label">Address</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">ID</label>
                    <label class="control-label">ID</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Contact Number</label>
                    <label class="control-label">Contact Number</label>
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">E-Mail Address</label>
                    <label class="control-label">E-Mail Address</label>
                </div>
            </div>                                  
        </div>
    </div>
</div>

Добавление некоторых кодов для Button event. 

$("#btn").on("click", function() {
$(".control-label-fn").append(" <b>Lorenz</b>");
$(".control-label-ln").append(" <b>D'Arabia</b>");
$(".control-label-add").append(" <b>Address 15/C</b>");
$(".control-label-id").append(" <b>21413</b>");
$(".control-label-cnum").append(" <b>333 33 33 333</b>");
$(".control-label-email").append(" <b>lorenz@lorenz.com</b>");
})
.btn_c {
  margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" id="btn" class="btn_c">
Add some information
</button>

<div id="Print" class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-md-6">
            <h2>Left Side</h2>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">First Name</label>
                    <label class="control-label-fn"></label>
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Last Name</label>
                    <label class="control-label-ln"></label>
                </div>
            </div>                  

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Address</label>
                    <label class="control-label-add"></label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">ID</label>
                    <label class="control-label-id"></label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Contact Number</label>
                    <label class="control-label-cnum"></label>
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">E-Mail Address</label>
                    <label class="control-label-email"></label>
                </div>
            </div>

        </div>
        <div class="col-sm-6 col-md-6">
            <h2>Right Side</h2>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">First Name</label>:&nbsp;                      
                    <label class="control-label">First Name</label>:&nbsp;                      
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Last Name</label>
                    <label class="control-label">Last Name</label>
                </div>
            </div>                  

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Address</label>
                    <label class="control-label">Address</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">ID</label>
                    <label class="control-label">ID</label>
                </div>
            </div>
            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">Contact Number</label>
                    <label class="control-label">Contact Number</label>
                </div>
            </div>

            <div class="col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="control-label">E-Mail Address</label>
                    <label class="control-label">E-Mail Address</label>
                </div>
            </div>                                  
        </div>
    </div>
</div>
0 голосов
/ 21 марта 2020

Решает ли это вашу проблему? 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">
  </head>
  <body>
    <div id="Print" class="container-fluid">
      <div class="row">
        
          <div class="col-sm-6 col-md-6" style="float: left;">
              <h2>Left Side</h2>
              <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                      <label class="control-label">First Name</label>
                      <label class="control-label">First Name</label>
                  </div>
              </div>

              <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                      <label class="control-label">Last Name</label>
                      <label class="control-label">Last Name</label>
                  </div>
              </div>                  

              <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                      <label class="control-label">Address</label>
                      <label class="control-label">Address</label>
                  </div>
              </div>
              <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                      <label class="control-label">ID</label>
                      <label class="control-label">ID</label>
                  </div>
              </div>
              <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                      <label class="control-label">Contact Number</label>
                      <label class="control-label">Contact Number</label>
                  </div>
              </div>

              <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                      <label class="control-label">E-Mail Address</label>
                      <label class="control-label">E-Mail Address</label>
                  </div>
              </div>

          </div>
          <div class="col-sm-6 col-md-6" style="float: right;" id="_right">
                  <h2>Right Side</h2>
                  <div class="col-sm-12 col-md-12">
                      <div class="form-group">
                          <label class="control-label">First Name</label>:&nbsp;                      
                          <label class="control-label">First Name</label>:&nbsp;                      
                      </div>
                  </div>

                  <div class="col-sm-12 col-md-12">
                      <div class="form-group">
                          <label class="control-label">Last Name</label>
                          <label class="control-label">Last Name</label>
                      </div>
                  </div>                  

                  <div class="col-sm-12 col-md-12">
                      <div class="form-group">
                          <label class="control-label">Address</label>
                          <label class="control-label">Address</label>
                      </div>
                  </div>
                  <div class="col-sm-12 col-md-12">
                      <div class="form-group">
                          <label class="control-label">ID</label>
                          <label class="control-label">ID</label>
                      </div>
                  </div>
                  <div class="col-sm-12 col-md-12">
                      <div class="form-group">
                          <label class="control-label">Contact Number</label>
                          <label class="control-label">Contact Number</label>
                      </div>
                  </div>

                  <div class="col-sm-12 col-md-12">
                      <div class="form-group">
                          <label class="control-label">E-Mail Address</label>
                          <label class="control-label">E-Mail Address</label>
                      </div>
                  </div>
              </div>                                  
          </div>
  </div>
      <button onclick="printJS({printable: 'Print', type: 'html', css: 'css/bootstrap.css'})">print</button>
      <script>
          $(window).resize(function() {
              document.getElementById('_right').style = "position: absolute; left: " + ($(window).width() - 500) + "px;";
          });
    </script>
  </body>
</html>

CodePen: https://codepen.io/marchmello/pen/LYVJGpq?editors=1100

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...