打印图表时显示身体样式

Body Styling Showing When Printing amcharts

本文关键字：样式 显示 打印      更新时间：2023-09-26

我正在做一个项目，其中包括一个amcharts.com图表与水印/覆盖图像(例如，在这里讨论:https://www.amcharts.com/kbase/adding-logo-watermark-exported-chart/)。图表包含在具有主体样式(例如，背景，框影等)的页面上的div中。当使用导出项"Print"打印图表时，生成的打印结果包括主体样式(例如，背景和框阴影)。但是，我希望打印时不需要这些项(例如，类似于"下载为…"子菜单中的"JPG"导出项)。

可以在这里找到一个例子:http://codepen.io/team/amcharts/pen/dc7015c33872771cf6e45e7752eaffe3。要查看效果，将以下CSS添加到现有CSS的顶部后，打印图表(使用图表右上方的导出菜单中的"打印"项):

body {
  background-color: #999;
  box-shadow: 0px 0px 10px 3px #444;
}

在Windows 10机器上，这种效果在Firefox中最为明显。在Chrome中，如果从html/body CSS中删除"margin: 0px;"，则背景是不可见的，但box-shadow是可见的。

可以通过使用javascript修改body样式来删除背景和框阴影(在打印之前删除背景和框阴影，然后重新添加)，但这会导致令人反感的闪烁。是否有可能完全从打印中排除主体(或其样式)?

要将CSS应用于处于打印模式的文档，您可以使用print媒体查询并写入您想要发生的所有更改(@media print { ... }

)
@media print { 
   body {
     background-color: transparent;
     box-shadow: 0 0 0 transparent;
   }
}
相关文章：