如何打印相同的<div>标签的内容？

Question

我想打印标签的内容。门户网站上的所有问题都显示了答案，但是打印选项卡中的卡片形状被扭曲了，我想要完全相同的身份证打印。当写div内容时，我想要输出。我想打印带有黑色边框的身份证。标记包含一个css文件。请看这张照片

Answer 1

查看CSS媒体查询。

@media print{

}

可用于在输出到打印机时将特定的CSS规则应用于文档。我猜你的问题是，你试图打印整个页面，而不仅仅是卡片，造成基于比例的扭曲。

编辑：

下面是对打印样式的详细介绍：教程

编辑：

对于你的问题，这里有一个更具体的答案：

@media print{
  *{
    display: none;
  }
  html, body, #card{
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
  }
}

*规则是隐藏所有内容的通配符--如果#卡包装在任何东西中(您不想隐藏它们)，您可能需要自定义它--您只想删除它们上的任何样式，比如背景色、边距或填充)。

下一条规则确保html、body和#card被显示，并且没有对它们应用边距--这是为了确保#card的位置与页面的左上角平齐。

我还抛出了一个最大宽度: 100%和高度:自动在这些元素上，以确保#卡不能大于页面。