下载 div 为 PDF 时如何显示部分但在屏幕上隐藏它

Question

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

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;} 
}

下载 div 为 PDF 时如何显示部分但在屏幕上隐藏它

How do I show a section when download div as PDF but hide it on screen

css

pdf

css-to-pdf