如何打印<div>标签的内容一样？

Question

我想打印标签的内容。门户网站上的所有上一个问题都显示了答案，但是打印标签中的卡片形状是扭曲的。我想要完全相同的身份证打印件。我希望输出为div内容。I want to print the ID card with the black borders.标签有一个css文件包含。 请看图片

Answer 1

查看CSS媒体查询。

@media print{

}

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

编辑：

以下是对打印样式的全面介绍：http://edutechwiki.unige.ch/en/CSS_for_print_tutorial

编辑：

以下是您问题的更具体的答案：

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

*规则是一个隐藏所有内容的通配符 - 如果您的#card包含在任何内容中，您可能需要自定义此选项（您不想隐藏这些内容 - 您只想删除它们）它们上的任何样式，例如背景颜色，边距或填充）。

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

我还在这些元素上抛出了max-width：100％和height：auto，以确保#card不会大于页面。