javascript - 打印 amcharts 时显示的 body 造型

Question

我正在开展一个元素，其中包括带有水印/叠加图像的 amcharts.com 图表(例如，如此处讨论:https://www.amcharts.com/kbase/adding-logo-watermark-exported-chart/)。图表包含在具有主体样式(例如，背景、框阴影等)的页面上的 div 中。使用导出项“打印”打印图表时，生成的打印包括主体样式(例如，背景和框阴影)。但是，我希望它在没有这些元素的情况下打印(例如，类似于“下载为...”子菜单中的“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 中，背景不可见，但如果“margin: 0px;”，则框阴影可见。从 html/body CSS 中删除。

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

Answer 1

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

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