vis js时间线图表背景无法打印

Question

我有一张vis js时间表图表。它具有vis-item-content的背景和图像：在样式表之后。

时间线图表可以在浏览器中正确显示背景样式。但是当我尝试通过点击＆＃34;文件 - ＆gt;打印＆＃34;进行打印时在浏览器中。背景只是空白。

1. type: 'background' is blank
2. vis-item-content:after  
   background: url("https://image.flaticon.com/icons/svg/306/306470.svg");  is also blank

从浏览器查看

但在打印预览中。所有背景均为空白

我知道我可以更改浏览器设置以显示＆＃34;背景颜色和图像＆＃34;。但对于客户来说，他们可能不知道如何做到这一点。我们需要更改代码以显示背景颜色和图像。

如需在打印预览中显示背景，我需要你的帮助。

感谢。

以下是样本 http://visjs.org/examples/timeline/items/backgroundAreas.html

或

https://jsfiddle.net/gbdjbdhv/58/

var items = new vis.DataSet([
    {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'},
    {id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'},
    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
  ]);


.vis-item-content:after {
                width: 40px;
                height: 40px;
                background-color: transparent;
                background: url("https://image.flaticon.com/icons/svg/306/306470.svg");
                background-size: 40px 40px;
                content: "";
                position: absolute;
                z-index: 2 !important;
            }

Answer 1

请参阅this answer和this：

  

使用Chrome和Safari，您可以添加CSS样式-webkit-print-color-adjust：exact;要强制打印背景颜色和/或图像的元素。

     

这开始在Firefox（至少版本48.0.2）中使用＆＃34; color-adjust＆＃34;属性。

这应该适用于大多数现代浏览器：

.vis-item-content:after {
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}