尝试使用定位位置打印出 DIV 的内容,同时保留 CSS 值


Trying to print out contents of a DIV using positioning placement while keeping the CSS Values?

>我有一个新的项目,我需要在屏幕上显示证书,并且还可以在硬拷贝打印机上打印出来。 我需要显示 4 个基于用户等级课程或课程的字段。 我的问题是我使用 CSS 将证书的图像显示为 DIV 中的背景图像,就其他 4 个变量字段而言,我使用相对定位与 TOP 和 LEFT 一起放置在屏幕上。 就屏幕而言,它看起来很棒,但是当我将其打印为PDF或硬拷贝时,我失去了字段的位置。 它们位于纸张上的图像下方,也不会保留其 CSS 值......不确定编程这样的东西的最佳方法是什么? 我这样做的方式是错误的吗? 我在网上搜索了许多文章,尝试了各种解决方案都无济于事。 在 DIV 中打印内容时,可以使用 CSS 进行放置吗?这是在Javascript中作为客户端而不是使用PHP和CSS,HTML很容易完成的事情吗?

用于打印的 CSS 可能很困难,部分原因是测试它涉及在不同的浏览器上一次又一次地进入打印预览状态。不同的浏览器可以解释打印的CSS,但差异很大。

如果您正在打印的内容,您知道将占用不到一页的内容,我建议您对几乎所有内容使用绝对定位。使用英寸(或百分比)作为度量单位,而不是像素或 ems。不要忘记,你也可以只设置绝对元素的topleftrightbottom,而不是指定宽度或高度。

@Protonfish使用仅打印样式表是正确的。您还可以使用 @media print { rules here } 解决常规样式表中的一组特定规则。

CSS 放置应该可以正常工作,除非它不能。我不能确定是什么导致了您的特定问题,但我可以建议一种尝试解决它的方法。

在 HTML 中,创建一个单独的样式块,如下所示:

<style type="text/css" media="print">
/* Put print-specific styles here */
</style>

你可以把任何你想要的CSS扔进去,它只会影响打印的外观 - 你根本不会弄乱屏幕布局。看看你是否可以通过这种方式修复它。祝你好运。