Body 打印 amcharts 时显示的样式

Question

我正在做一个项目，其中包含一个 amcharts.com 图表和 watermark/overlay 图像（例如，如此处讨论：https://www.amcharts.com/kbase/adding-logo-watermark-exported-chart/）。该图表包含在具有 body 样式（例如背景、box-shadow 等）的页面上的 div 中。使用导出项 "Print," 打印图表时，打印结果包括 body 样式（例如，背景和框阴影）。但是，我希望它在没有这些项目的情况下打印（例如，类似于 "Download as..." sub-menu 中的 "JPG" 导出项目）。

可在此处找到示例：http://codepen.io/team/amcharts/pen/dc7015c33872771cf6e45e7752eaffe3。要查看效果，在现有的[=37]顶部添加以下CSS后打印图表（使用图表top-right处导出菜单的"Print"项） =]:

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

在 Windows 10 机器上，效果在 Firefox 中最为明显。在 Chrome 中，如果从 html/body CSS.

中删除 "margin: 0px;"，则背景不可见，但 box-shadow 可见

可以通过使用 javascript 更改 body 样式来删除背景和 box-shadow（在打印前删除背景和 box-shadow，在打印后删除 re-adding ), 但这会导致令人反感的闪烁。是否可以完全从打印中排除 body（或其样式）？

Answer 1

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

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

Body 打印 amcharts 时显示的样式

Body Styling Showing When Printing amcharts

html

javascript

css

amcharts

fabricjs