javascript - 使用 printjs 的语义 ui 模态打印没有得到结果

Question

使用 printjs 库的语义 ui 模态 ptint。但结果不是正确显示预期的模态打印。帮助？

$(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 应用样式，这是打印时出现问题的原因。

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

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