css - 如何在将 div 下载为 PDF 时显示一个部分，但将其隐藏在屏幕上

Question

当用户按下提交按钮时，我使用 xepOnline Formatter 库将特定的 div 保存为 PDF 文件。我在这里问如何使一个部分在屏幕上不可见，而在保存的文件中可见。有关下面的更多详细信息，我有一个包含图像和表格的 div。在屏幕上，我只想显示没有图像的表格。图片应该出现在下载的文件上。

HTML

<div class="confirmation" id="output">
  <img src="image.jpg" class="noScreen" />
   <h3>Thank you. Your booking has been confirmed</h3>
    <table>
     <tr><td><b>Title</b></td><td>Name</td></tr>
    </table>
</div>
<button id="cmd">Download Invoice As PDF</button>

CSS

@media screen
{
.noPrint{}
.noScreen{display:none;}
}
@media print
{
.noPrint{display:none;}
.noScreen{}
}

JavaScript

$('#cmd').click(function () {
return xepOnline.Formatter.Format('output',{render:'download'});
});

你们中有人能找到一种方法来做到这一点吗？

Answer 1

您可以使用媒体查询语法打印命令在那里显示您的 div。

@media print 
{ 
.noPrint{display:none;} 
.noScreen{display:block;} 
}