使用printjs的语义ui模式打印得不到结果

Question

语义ui模式ptint使用printjs库。但结果并不是正确地显示了期望的模态打印。帮忙？

​

$(document).ready(function(){
$('#logIn').click(function(){
$('#modaldiv').modal('show');    
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" rel="stylesheet"/>

<div id="modaldiv" class="ui modal">

<button type="ui button" id="button" onclick="printJS({ printable: 
     'modaldiv',type: 'html',showModal:true, printContainer: 
      true,copyTagClasses: true})">
       Print
</button>  //print button and printjs command active
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="img/bmw5.png">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="#" 
target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>

<a class="item ui button" id="logIn">
<i class="user icon"></i> Log In 
</a>  // modal open login button

​

Answer 1

打印此模式的问题与print.js无关。该模式有一个负的margin-top应用风格，这是原因时，它的印刷。

在这个小提琴中，您可以使用Print2按钮进行测试，它将在相同的模式中打印另一个html元素内容，没有任何问题。

https://jsfiddle.net/crabbly/y8e4ga8p/