打印amcharts时显示的正文样式

Question

我正在开发一个项目，其中包含带有水印/叠加图像的amcharts.com图表（例如，如下所述：https://www.amcharts.com/kbase/adding-logo-watermark-exported-chart/）。该图表包含在具有正文样式的页面上的div中（例如，背景，框阴影等）。使用导出项目打印图表时＆＃34;打印，＆＃34;得到的印刷品包括主体造型（例如，背景和框阴影）。但是，我希望它在没有这些项目的情况下打印（例如，类似于＆＃34; JPG＆＃34;导出项目在＆＃34;下载为...＆＃34;子菜单）。

可在此处找到一个示例：http://codepen.io/team/amcharts/pen/dc7015c33872771cf6e45e7752eaffe3。要查看效果，请在将现有CSS的顶部添加以下CSS后，打印图表（使用图表右上方导出菜单的＆＃34;打印＆＃34;项目）：

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

在Windows 10计算机上，效果在Firefox中最为明显。在Chrome中，背景不可见，但如果＆＃34; margin：0px;＆＃34;可以看到框阴影。从html / body CSS中删除。

可以通过使用javascript更改正文样式（在打印之前删除背景和框阴影并在之后重新添加）来删除背景和框阴影，但这会导致令人反感的闪烁。是否可以完全从印刷中排除主体（或其样式）？

Answer 1

要在文档处于打印模式时将CSS应用于文档，您可以使用print媒体查询并编写您想要发生的每个更改（@media print { ... }

@media print { 
   body {
     background-color: transparent;
     box-shadow: 0 0 0 transparent;
   }
}